ch-tgr/src/views/Tabbars/Home.vue

<template>
  <div class="index-page">
    <van-swipe v-if="data && data.Carousel" @change="onSwipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in data.Carousel">
        <a @click="item.link ? $openUrl(item.Url) : ''"><img :src="$file(item.img) || '/img/avatar.png'"
            width="100%"></a>
      </van-swipe-item>
    </van-swipe>

    <div class="mx-auto">

      <div class="data">
        <div class="_d">
          <p>{{ new Date().getDate() }}</p>
          {{ month }}月
        </div>
        <van-swipe vertical v-bind:touchable="false" class="notice-swipe" style="height: 12vw" :autoplay="3000"
          v-bind:show-indicators="false">
          <van-swipe-item class="v" style="height: 12vw; line-height: 6vw" v-for="item in data.Trends" :key="index">
            <a :key="item.id" @click="$navigate(`/ColumnDetail?id=${item.id}`)">
              <span></span>{{ item.name }}
            </a>
          </van-swipe-item>
        </van-swipe>
      </div>

      <div class="column3_part">
        <div class="p1" @click="$navigate('/ColumnDetail?id=1')">
          <img src="/img/index-column-i1.png">
          <span>公司介绍</span>
          <p>了解泰古润</p>
        </div>
        <div class="p2" @click="$navigate('/Business_School')">
          <img src="/img/index-column-i2.png">
          <span>商学院</span>
          <p>学习知识</p>
        </div>
        <!-- <div @click="$navigate('/ColumnDetail?id=2')">
          <img src="/img/index-column-i3.png">
          <span>招商合作</span>
        </div> -->
        <div class="p3" @click="$navigate('/Column?pid=3')">
          <img src="/img/index-column-i4.png">
          <span>公司动态</span>
          <p>最新动态资讯</p>
        </div>
      </div>

      <div class="tomall">
        <div class="base_box left" @click="$navigate('Gift')">
          <div class="top">
            <b>升级礼包</b>
            <span>购买即可升级</span>
            <!-- <p>购买即可升级</p> -->
          </div>
          <img src="/img/tomall_i1.png" alt="">
        </div>

        <div class="base_box right" @click="$navigate('Mall')">
          <div class="top">
            <b>官方商城</b>
            <span>享受更多优惠</span>
            <!-- <p>大家都在买</p> -->
          </div>
          <img src="/img/tomall_i2.png" alt="">
        </div>
      </div>

      <div class="k">
        <div class="tit mx-auto">
          <span style="margin-bottom: 3.467vw;">
            <!-- <font></font> -->
            宣传视频
          </span>
          <p></p>
        </div>

        <div class="video_box">
          <video v-if="data.video" :src="$file(data.video.contents)" :poster="data.video.filecover" controls></video>

          <button @click="$navigate('/ColumnDetail?id=1')">了解我们</button>
        </div>
      </div>

      <div class="k">

        <div class="tit">
          <span>
            <!-- <font>保供</font>动态 -->
            平台动态
          </span>
          <p></p>
          <a @click="$navigate('Column?id=Trends')">
            更多<van-icon name="arrow"></van-icon>
          </a>
        </div>

        <div class="news">
          <div class="c">
            <a @click.stop="$navigate('ColumnDetail?id=' + item.id)" class="list" v-for="item in data.News"
              :key="item.id">
              <img :src="$file(item.img)" />

              <div>
                <div class="titname">{{ item.name }}</div>
                <div class="lab">{{ item.description }}</div>
                <div class="times">{{ $formatGMT(item.addtime, 'yyyy-MM-dd') }}</div>
              </div>
            </a>
          </div>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
// import date from "../utils/date.js";
import date from "../../utils/date.js"

export default {
  name: 'Home',
  mounted() {
    this.init();
    this.data = { Carousel: [], News: [], Trends: [], Video: null };
    this.options = [];
  },
  data() {
    return {
      data: {},
      month: date.getMonth_C(),
      showcreate: false,
      showcreateing: false,
      checked: 0,
      tempData: {},

      showRegion: false,
      options: [],
      defaultProps: {
        value: "id",
        text: "name",
      },
      region: '',
      loading: false,
    }
  },
  methods: {
    init() {
      Promise.all([
        this.$get('/v1/client/CNewsClient', { page: 1, pageSize: 3, pid: 3 }).then(data => {
          this.data.News = data.data.items;
        }),
        this.$get('/v1/client/CNewsClient?pid=2').then(data => {
          this.data.Trends = data.data.items;
        }),
        this.$get('/v1/client/CSlidesClient?pid=1').then(data => {
          this.data.Carousel = data.data;
        }),
        this.$get('/v1/client/CDatadicsClient/code_sp').then(data => {
          this.data.video = data.data;
        })
      ]).catch(err => {
        this.$showFailToast(err.message || '数据加载失败');
      });
    },
    create() {
      // this.showcreate = true;
      this.$post('Member/GetApplyAgent').then(res => {
        const data = res.data || res;
        if (!data.AgentCode)
          this.showcreate = true;
        else {
          this.showcreateing = true;
        }
      }).catch(err => {
        this.$showFailToast(err.message);
      });
    },
    changebox(e) {
      this.checked = e;
      this.tempData.AgentRegion = '';
      this.tempData.AgentRegionName = '';
      this.region = '';
    },
    onChange(e) {
      if (e.selectedOptions.length > 0 && e.selectedOptions[0].level == 'province' && this.checked == 4) {
        e.selectedOptions[e.tabIndex].children = null;
        this.showRegion = false;
        return;
      }
      else if (e.selectedOptions.length > 1 && e.selectedOptions[1].level == 'city' && this.checked == 3) {
        e.selectedOptions[e.tabIndex].children = null;
        this.showRegion = false;
        return;
      }
      else if (e.selectedOptions.length > 2 && e.selectedOptions[2].level == 'district' && this.checked == 2) {
        e.selectedOptions[e.tabIndex].children = null;
        this.showRegion = false;
        return;
      }

      if (e.selectedOptions[e.tabIndex].leaf) {
        e.selectedOptions[e.tabIndex].children = null;
        this.showRegion = false;
        return;
      }
      else if (!e.selectedOptions[e.tabIndex].children || e.selectedOptions[e.tabIndex].children.length == 0) {
        this.$post('Common/GetRegions', { value: e.value }).then(res => {
          const data = res.data || res;
          if (data.length > 0) {
            data.forEach(x => { x.children = [] });
            e.selectedOptions[e.tabIndex].children = data;
          }
          else {
            e.selectedOptions[e.tabIndex].children = null;
            this.showRegion = false;
          }
        });
      }
    },
    onFinish(e) {
      this.showRegion = false;
      this.tempData.AgentRegion = e.selectedOptions.map(x => x.id).join(';');
      this.tempData.AgentRegionName = e.selectedOptions.map(x => x.name).join('');
    },
    submit() {
      if (!this.tempData.AgentName) {
        this.$showFailToast('请输入姓名');
        return;
      }
      if (!this.tempData.AgentPhone) {
        this.$showFailToast('请输入手机号');
        return;
      }
      if (!this.$validPhone(this.tempData.AgentPhone)) {
        this.$showFailToast('手机号格式错误');
        return;
      }
      if (!this.tempData.AgentRegion) {
        this.$showFailToast('请选择共创区域');
        return;
      }
      this.loading = true;
      this.$post('Member/ApplyAgent', this.tempData).then(res => {
        this.tempData = {};
        this.$showSuccessToast('提交成功');
        this.showcreate = false;
      }).catch(err => {
        this.$showFailToast(err.message);
      }).finally(() => {
        this.loading = false;
      });
    },
  }
}
</script>