deliver-admin/src/views/put/modules/CreateForm.vue

<template>
  <div>
    <a-drawer
      :title="title"
      placement="right"
      :closable="true"
      @close="onClose"
      :visible="drawerVisible"
      :width="950">
      <a-form @submit="handleSubmit" :form="form" class="form">
        <a-row class="form-row" :gutter="32">
          <a-col :lg="8" :md="12" :sm="24">
            <a-form-item label="建议等级">
              <a-select
                size="default"
                style="width: 200px"
                v-decorator="['putLevel',{ rules: [{ required: true, message: '请选择', whitespace: true }] }]"
                @change="handleSelectChange">
                <a-select-option v-for="item in levelList" :key="String(item.name)" :value="String(item.name)">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row class="form-row" :gutter="16">
          <a-col :lg="8" :md="12" :sm="24">
            <a-form-item label="投放量级">
              <a-select
                size="default"
                style="width: 200px"
                v-decorator="['putCountLevel',{ rules: [{ required: true, message: '请选择', whitespace: true }] }]"
                @change="handleSelectChange">
                <a-select-option v-for="item in levelCountList" :key="String(item.name)" :value="String(item.name)">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row class="form-row" :gutter="16">
          <a-col :lg="8" :md="12" :sm="24">
            <a-form-item label="流量标签">
              <a-cascader :options="authInfoList" placeholder="请选择流量标签" @change="onChange" v-decorator="['putTag',{ rules: [{ required: true }] }]" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row class="form-row" :gutter="16">
          <a-col :lg="8" :md="12" :sm="24">
            <a-form-item label="建议投放性别">
              <a-radio-group v-model="putGender" v-decorator="['putGender', {initialValue:0, rules: [{ required: true}] }]">
                <a-radio :value="1">男</a-radio>
                <a-radio :value="2">女</a-radio>
                <a-radio :value="0">不限</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row class="form-row" :gutter="16">
          <a-col :lg="8" :md="12" :sm="24">
            <a-form-item label="建议投放年龄">
              <a-select
                size="default"
                style="width: 200px"
                v-decorator="['putAgeStr',{ rules: [{ required: true, message: '请选择', whitespace: true }] }]"
                @change="handleSelectChange">
                <a-select-option
                  v-for="item in putAgeList"
                  :key="String(item.value)"
                  :value="String(item.value)">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row class="form-row" :gutter="16">
          <a-col :lg="8" :md="12" :sm="24">
            <a-form-item label="投放地域">
              <a-input
                placeholder="请输入 "
                v-decorator="['putCity', { rules: [{ required: true, message: '请输入', whitespace: true }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row class="form-row" :gutter="16">
          <a-col :lg="8" :md="12" :sm="24">
            <a-form-item label="投放时长">
              <a-select
                size="default"
                style="width: 200px"
                v-decorator="['putDuration',{ rules: [{ required: true, message: '请选择', whitespace: true }] }]"
                @change="handleSelectChange">
                <a-select-option
                  v-for="item in putDurationList"
                  :key="String(item.value)"
                  :value="String(item.value)">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row class="form-row" :gutter="16">
          <a-col :lg="8" :md="12" :sm="24">
            <a-form-item label="投放理由">
              <a-select
                size="default"
                style="width: 200px"
                v-decorator="['putReason',{ rules: [{ required: true, message: '请选择', whitespace: true }] }]"
                @change="handleSelectChange">
                <a-select-option
                  v-for="item in putReasonList"
                  :key="String(item.name)"
                  :value="String(item.name)">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <div
          :style="{
            position: 'absolute',
            left: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'right',
            zIndex: '10'
          }"
        >
          <a-button :style="{marginRight: '8px'}" @click="onClose">
            取消
          </a-button>
          <a-button type="primary" @click="handleSubmit">
            投放
          </a-button>
        </div>
      </a-form>
    </a-drawer>
  </div>
</template>

<script>

import { saveAuthorVideo } from '@/api/author'

export default {
  name: 'CreatePutForm',
  components: {},
  props: {
    formType: {
      type: String,
      default: 'create'
    },
    visible: {
      type: Boolean
    }
  },
  data () {
    return {
      record: {},
      title: '发起投放',
      id: null,
      drawerVisible: false,
      form: this.$form.createForm(this, { name: 'create_author' }),

      putGender: '',

      // 下放流量信息
      sendCountList: [
        { 'count': 50000, name: '50000点流量券/人' },
        { 'count': 5000, name: '5000点流量券/人' },
        { 'count': 2500, name: '2500点流量券/人' },
        { 'count': 500, name: '500点流量券/人' }
      ],

      // 作者等级信息
      authorLevelList: [
        { 'id': 1, name: '顶流作者' },
        { 'id': 2, name: '头部作者' },
        { 'id': 3, name: '腰部作者' },
        { 'id': 4, name: '尾部作者' }
      ],

      // 建议等级
      levelList: [
        { 'id': 1, name: 'S' },
        { 'id': 2, name: 'A' },
        { 'id': 3, name: 'B' },
        { 'id': 4, name: 'C' },
        { 'id': 5, name: 'D' }
      ],

      // levelCountList
      levelCountList: [
        { 'id': 1, name: 50000 },
        { 'id': 2, name: 30000 },
        { 'id': 3, name: 10000 },
        { 'id': 4, name: 5000 },
        { 'id': 5, name: 1000 }
      ],

      putAgeList: [
        { 'value': '1-17', name: '1-17岁' },
        { 'value': '18-24', name: '18-24岁' },
        { 'value': '25-35', name: '25-35岁' },
        { 'value': '35-50', name: '35-50岁' },
        { 'value': '35-50', name: '50岁以上' }
      ],

      putDurationList: [
        { 'value': 5, name: '5H' },
        { 'value': 12, name: '12H' },
        { 'value': 24, name: '24H' },
        { 'value': 48, name: '48H' }
      ],

      putReasonList: [
        { 'value': '流量激励', name: '流量激励' },
        { 'value': '新作者冷启动', name: '新作者冷启动' },
        { 'value': '资源置换', name: '资源置换' },
        { 'value': '优质低数据作者', name: '优质低数据作者' },
        { 'value': '其他', name: '其他' }
      ],

      // 作者认证分类信息
      authInfoList: [
        {
          value: '兴趣认证',
          label: '兴趣认证',
          children: [
            {
              value: '主播',
              label: '主播',
              children: [
                { value: '体育主播', label: '体育主播' },
                { value: '动漫主播', label: '动漫主播' },
                { value: '美食主播', label: '美食主播' },
                { value: '游戏主播', label: '游戏主播' },
                { value: '音乐主播', label: '音乐主播' },
                { value: '娱乐主播', label: '娱乐主播' }
              ]
            },
            {
              value: '自媒体',
              label: '自媒体',
              children: [
                { value: '美妆自媒体', label: '美妆自媒体' },
                { value: '教育自媒体', label: '教育自媒体' },
                { value: '房产自媒体', label: '房产自媒体' },
                { value: '汽车自媒体', label: '汽车自媒体' },
                { value: '科普自媒体', label: '科普自媒体' },
                { value: '游戏自媒体', label: '游戏自媒体' },
                { value: '三农自媒体', label: '三农自媒体' },
                { value: '航空自媒体', label: '航空自媒体' },
                { value: '法律自媒体', label: '法律自媒体' },
                { value: '设计美学自媒体', label: '设计美学自媒体' },
                { value: '军事自媒体', label: '军事自媒体' },
                { value: '音乐自媒体', label: '音乐自媒体' },
                { value: '运动自媒体', label: '运动自媒体' },
                { value: '舞蹈自媒体', label: '舞蹈自媒体' },
                { value: '文学自媒体', label: '文学自媒体' },
                { value: '宠物自媒体', label: '宠物自媒体' },
                { value: '互联网自媒体', label: '互联网自媒体' },
                { value: '生活自媒体', label: '生活自媒体' },
                { value: '户外自媒体', label: '户外自媒体' },
                { value: '艺术自媒体', label: '艺术自媒体' },
                { value: '动漫自媒体', label: '动漫自媒体' }
              ]
            },
            {
              value: '博主',
              label: '博主',
              children: [
                { value: '美妆博主', label: '美妆博主' },
                { value: '教育博主', label: '教育博主' },
                { value: '房产博主', label: '房产博主' },
                { value: '汽车博主', label: '汽车博主' },
                { value: '科普博主', label: '科普博主' },
                { value: '游戏博主', label: '游戏博主' },
                { value: '三农博主', label: '三农博主' },
                { value: '航空博主', label: '航空博主' },
                { value: '法律博主', label: '法律博主' },
                { value: '设计美学博主', label: '设计美学博主' },
                { value: '军事博主', label: '军事博主' },
                { value: '运动博主', label: '运动博主' },
                { value: '舞蹈博主', label: '舞蹈博主' },
                { value: '文学博主', label: '文学博主' },
                { value: '宠物博主', label: '宠物博主' },
                { value: '音乐博主', label: '音乐博主' },
                { value: '互联网博主', label: '互联网博主' },
                { value: '生活博主', label: '生活博主' },
                { value: '户外博主', label: '户外博主' },
                { value: '艺术博主', label: '艺术博主' },
                { value: '动漫博主', label: '动漫博主' }
              ]
            }
          ]
        },
        {
          value: '职业认证',
          label: '职业认证',
          children: [
            {
              value: '建筑工程',
              label: '建筑工程',
              children: [
                { value: '建造造价', label: '建造造价' },
                { value: '设计勘察', label: '设计勘察' }
              ]
            },
            {
              value: '游戏动漫',
              label: '游戏动漫',
              children: [
                { value: '电子竞技', label: '电子竞技' },
                { value: '动漫绘画', label: '动漫绘画' }
              ]
            },
            {
              value: '科学科普',
              label: '科学科普',
              children: [
                { value: '地理', label: '地理' },
                { value: '化学', label: '化学' },
                { value: '数学', label: '数学' },
                { value: '气候', label: '气候' },
                { value: '物理', label: '物理' },
                { value: '天文', label: '天文' },
                { value: '生物', label: '生物' },
                { value: '其他', label: '其他' }
              ]
            },
            {
              value: 'IT通信',
              label: 'IT通信',
              children: [
                { value: '产品', label: '产品' },
                { value: '架构', label: '架构' },
                { value: '软件', label: '软件' },
                { value: '硬件', label: '硬件' },
                { value: '设计', label: '设计' }
              ]
            },
            {
              value: '财经',
              label: '财经',
              children: [
                { value: '财经', label: '财经' },
                { value: '会计', label: '会计' },
                { value: '保险', label: '保险' },
                { value: '金融', label: '金融' },
                { value: '经济', label: '经济' }
              ]
            },
            {
              value: '教育',
              label: '教育',
              children: [
                { value: '校长', label: '校长' },
                { value: '院士', label: '院士' },
                { value: '教授', label: '教授' },
                { value: '教师', label: '教师' }
              ]
            },
            {
              value: '传媒',
              label: '传媒',
              children: [
                { value: '记者', label: '记者' },
                { value: '主持人', label: '主持人' },
                { value: '编辑', label: '编辑' },
                { value: '评论员', label: '评论员' }
              ]
            },
            {
              value: '法律',
              label: '法律',
              children: [
                { value: '律师', label: '律师' }
              ]
            },
            {
              value: '生活服务',
              label: '生活服务',
              children: [
                { value: '健身教练', label: '健身教练' },
                { value: '宠物医生', label: '宠物医生' },
                { value: '翻译官', label: '翻译官' },
                { value: '导游', label: '导游' },
                { value: '紧急救助员', label: '紧急救助员' }
              ]
            },
            {
              value: '体育',
              label: '体育',
              children: [
                { value: '极限运动', label: '极限运动' },
                { value: '健身', label: '健身' },
                { value: '瑜伽', label: '瑜伽' },
                { value: '休闲运动', label: '休闲运动' },
                { value: '水上运动', label: '水上运动' },
                { value: '冰雪项目', label: '冰雪项目' },
                { value: '空手道', label: '空手道' },
                { value: '举重', label: '举重' },
                { value: '武术', label: '武术' },
                { value: '柔道', label: '柔道' },
                { value: '羽毛球', label: '羽毛球' },
                { value: '中国象棋', label: '中国象棋' },
                { value: '定向越野', label: '定向越野' },
                { value: '台球', label: '台球' },
                { value: '马术', label: '马术' }
              ]
            }
          ]
        },
        {
          value: '暂不认证',
          label: '暂不认证',
          children: [
            { value: '无认证意愿/必要', label: '无认证意愿/必要' },
            { value: '作者自主认证', label: '作者自主认证' },
            { value: '机构主体认证', label: '机构主体认证' }
          ]
        }
      ],

      // 作者分类信息
      categoryNameList: [
        {
          value: '生活',
          label: '生活',
          children: [
            { value: '职场生活', label: '职场生活' },
            { value: '农村生活', label: '农村生活' },
            { value: '校园生活', label: '校园生活' },
            { value: '趣事', label: '趣事' },
            { value: '奇闻猎奇', label: '奇闻猎奇' },
            { value: '纪实现场', label: '纪实现场' },
            { value: 'vlog', label: 'vlog' },
            { value: 'DIY', label: 'DIY' },
            { value: '公益', label: '公益' },
            { value: '随拍', label: '随拍' },
            { value: '生活技巧', label: '生活技巧' }
          ]
        },
        {
          value: '情感',
          label: '情感',
          children: [
            { value: '两性情感', label: '两性情感' },
            { value: '亲情', label: '亲情' },
            { value: '友情', label: '友情' },
            { value: '心灵鸡汤', label: '心灵鸡汤' },
            { value: '情感微剧', label: '情感微剧' },
            { value: '情感语录', label: '情感语录' }
          ]
        },
        {
          value: '新闻资讯',
          label: '新闻资讯',
          children: [
            { value: '时政外交', label: '时政外交' },
            { value: '财经新闻', label: '财经新闻' },
            { value: '法制新闻', label: '法制新闻' },
            { value: '交通资讯', label: '交通资讯' },
            { value: '社会民生', label: '社会民生' },
            { value: '其他', label: '其他' }
          ]
        },
        {
          value: '知识',
          label: '知识',
          children: [
            { value: '科学知识', label: '科学知识' },
            { value: '语言学习', label: '语言学习' },
            { value: '口才/演讲', label: '口才/演讲' },
            { value: '职场', label: '职场' },
            { value: '营销', label: '营销' },
            { value: '星座', label: '星座' },
            { value: '科技产品科普', label: '科技产品科普' },
            { value: '文化历史', label: '文化历史' },
            { value: '冷知识', label: '冷知识' },
            { value: '教育考试', label: '教育考试' },
            { value: '法律', label: '法律' }
          ]
        },
        {
          value: '运动',
          label: '运动',
          children: [
            { value: '健身', label: '健身' },
            { value: '瑜伽', label: '瑜伽' },
            { value: '极限运动', label: '极限运动' },
            { value: '冰雪运动', label: '冰雪运动' },
            { value: '足球', label: '足球' },
            { value: '高尔夫', label: '高尔夫' },
            { value: '其他球类', label: '其他球类' },
            { value: '武术搏击', label: '武术搏击' },
            { value: '水上运动', label: '水上运动' },
            { value: '滑板轮滑', label: '滑板轮滑' },
            { value: '休闲运动', label: '休闲运动' }
          ]
        },
        {
          value: '才艺',
          label: '才艺',
          children: [
            { value: '绘画', label: '绘画' },
            { value: '唱歌', label: '唱歌' },
            { value: '舞蹈', label: '舞蹈' },
            { value: '演奏', label: '演奏' },
            { value: '书法', label: '书法' },
            { value: '杂技', label: '杂技' },
            { value: '特效炫技', label: '特效炫技' },
            { value: '魔术', label: '魔术' },
            { value: '手工艺', label: '手工艺' },
            { value: '戏曲', label: '戏曲' },
            { value: '话剧', label: '话剧' }
          ]
        },
        {
          value: '旅行风景',
          label: '旅行风景',
          children: [
            { value: '人文景观', label: '人文景观' },
            { value: '历史古迹', label: '历史古迹' },
            { value: '自然风景', label: '自然风景' },
            { value: '旅行攻略', label: '旅行攻略' },
            { value: '当地特色见闻', label: '当地特色见闻' },
            { value: '旅行vlog', label: '旅行vlog' }
          ]
        },
        {
          value: '明星名人',
          label: '明星名人',
          children: [
            { value: '娱乐明星', label: '娱乐明星' },
            { value: '网红', label: '网红' },
            { value: '体育明星', label: '体育明星' },
            { value: '知名人士', label: '知名人士' }
          ]
        },
        {
          value: '时尚',
          label: '时尚',
          children: [
            { value: '美妆', label: '美妆' },
            { value: '美甲', label: '美甲' },
            { value: '美发', label: '美发' },
            { value: '仿妆', label: '仿妆' },
            { value: '护肤', label: '护肤' },
            { value: '穿搭', label: '穿搭' },
            { value: '美拍/修图技巧', label: '美拍/修图技巧' },
            { value: '时尚活动', label: '时尚活动' },
            { value: '整形整容', label: '整形整容' }
          ]
        },
        {
          value: '二次元',
          label: '二次元',
          children: [
            { value: '动漫/番剧', label: '动漫/番剧' },
            { value: '表情包壁纸', label: '表情包壁纸' },
            { value: '宅舞', label: '宅舞' },
            { value: 'cosplay', label: 'cosplay' },
            { value: '虚拟人物', label: '虚拟人物' },
            { value: '周边', label: '周边' }
          ]
        },
        {
          value: '美食',
          label: '美食',
          children: [
            { value: '探店攻略', label: '探店攻略' },
            { value: '吃播', label: '吃播' },
            { value: '美食秀', label: '美食秀' },
            { value: '烹饪教学', label: '烹饪教学' },
            { value: '酒类', label: '酒类' },
            { value: '茶道', label: '茶道' }
          ]
        },
        {
          value: '动物',
          label: '动物',
          children: [
            { value: '猫', label: '猫' },
            { value: '狗', label: '狗' },
            { value: '鱼类', label: '鱼类' },
            { value: '鸟类', label: '鸟类' },
            { value: '鼠类', label: '鼠类' },
            { value: '爬行动物', label: '爬行动物' },
            { value: '昆虫', label: '昆虫' },
            { value: '其他动物', label: '其他动物' }
          ]
        }
      ]
    }
  },
  watch: {
    visible (val) {
      this.drawerVisible = val
    },
    formType (val) {
      this.title = (val === 'create' ? '发起投放' : '更新作者')
    }
  },
  created () {
  },
  methods: {
    onChange (value) {
      console.log(value)
    },
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFieldsAndScroll((err, values) => {
        console.log(this.$route.query.id)
        if (!err) {
          console.log('Received values of form: ', values)
          const createParams = { ...values }

          if (createParams.putTag !== undefined) {
            this.record.putTag = createParams.putTag[createParams.putTag.length - 1]
          }

          if (createParams.putAgeStr !== undefined) {
            this.record.putAgeStart = createParams.putAgeStr.split('-')[0]
            this.record.putAgeEnd = createParams.putAgeStr.split('-')[1]
          }

          if (createParams.putGender !== undefined) {
            this.record.putGender = createParams.putGender === 0 ? '不限' : createParams.putGender === 1 ? '男' : '女'
          }

          createParams.status = 1
          createParams.id = this.record.id
          var obj = Object.assign(createParams, this.record)
          saveAuthorVideo(obj)
            .then(response => {
              this.$notification.success({
                message: response.message
              })
              this.$emit('refreshTable')
            })
            .catch(err => {
              console.log(err)
            })

          this.content = ''
          this.form.resetFields()
          this.drawerVisible = false
          this.$emit('resetData', false)
        }
      })
    },
    onClose () {
      this.resetForm(this.record)
      this.drawerVisible = false
      this.$emit('resetData', false)
    },
    resetForm (record) {
      this.record = record
      this.id = record.id
      console.log(record)
      this.form.resetFields()
    },
    handleChange ({ fileList }) {
      console.log(fileList)
    },
    handleSelectChange (value) {
      console.log(`Selected: ${value}`)
    }
  }
}
</script>
<style>
.edit-input {
  padding-right: 100px;
}

.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>