banner-params.vue 3.37 KB
<template>
    <div>
        <Form>
            <FormItem>
                <Select v-model="action_">
                    <Option v-for="item in actionList" :value="item.value" :label="item.label"></Option>
                </Select>
            </FormItem>

            <FormItem>
                <h5-url v-if="action_ === 'go.h5'" v-model="url_"></h5-url>
                <pool-url v-else-if="action_ === 'go.pool'" v-model="url_"></pool-url>
                <detail-url v-else-if="action_ === 'go.detail'" v-model="url_"></detail-url>
                <list-url v-else-if="action_ === 'go.list'" v-model="url_"></list-url>
                <calendar-url v-else-if="action_ === 'go.calendar'" v-model="url_"></calendar-url>
                <hotlist-url v-else-if="action_ === 'go.hotlist'" v-model="url_"></hotlist-url>
            </FormItem>
        </Form>
    </div>
</template>

<script>

  import h5 from './banner-h5';
  import pool from './banner-pool';
  import detail from './banner-detail';
  import list from './banner-list';
  import calendar from './banner-calendar';
  import hotlist from './banner-hotlist';
  import util from '@/libs/util';

  export default {
    props: ['value'],
    data() {
      return {
        url_: this.value.url,
        action_: this.value.action,
        islogin: this.value.islogin,
        headerid: this.value.headerid,
        actionList: [
          {
            value: 'go.h5',
            label: 'H5网页'
          },
          {
            value: 'go.pool',
            label: '商品池'
          },
          {
            value: 'go.detail',
            label: '商品详情'
          },
          {
            value: 'go.list',
            label: '商品列表'
          },
          {
            value: 'go.calendar',
            label: '发售日历页'
          },
          {
            value: 'go.hotlist',
            label: '热卖列表页'
          },
          {
            value: 'go.bargainlist',
            label: '砍价列表页'
          }
        ]
      };
    },
    methods: {
      updateStatus() {
        const data = {url: this.url_, action: this.action_};

        if (this.islogin) {
          data.islogin = this.islogin;
        }

        if (this.headerid) {
          data.headerid = this.headerid;
        }
        
        this.$emit('input', data);
      }
    },
    watch: {
      url_(newVal) {
        console.log(newVal);
        this.updateStatus();
      },
      action_(newVal) {
        if (newVal === 'go.detail') {
          this.url_ = 'https://m.yohobuy.com/?pagename=productDetail';
        } else if (newVal === 'go.pool') {
          this.url_ = 'https://m.yohobuy.com/?pagename=productList';
        } else if (newVal === 'go.list') {
          this.url_ = '';
        } else if (newVal === 'go.h5') {
          this.url_ = '';
        } else if (newVal === 'go.calendar') {
          this.url_ = 'https://m.yohobuy.com/?pagename=saleCalendar';
        } else if (newVal === 'go.hotlist') {
          this.url_ = 'https://m.yohobuy.com/?pagename=hotSale';
        } else if (newVal === 'go.bargainlist') { // 砍价列表
          this.url_ = 'https://m.yohobuy.com/';
        }

        this.updateStatus();
      }
    },
    components: {
      h5Url: h5,
      poolUrl: pool,
      detailUrl: detail,
      listUrl: list,
      calendarUrl: calendar,
      hotlistUrl: hotlist
    }
  };
</script>

<style>

</style>