mobile-official/src/views/live/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="style">
        <el-col :span="24" class="top">
          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
        </el-col>
        <el-col :span="24" class="main">
          <!-- <van-tabs v-model="active">
            <van-tab title="科技成果在线">
              <product :province="province" :place="place" news="1"></product>
            </van-tab>
            <van-tab title="人才对接在线">
              <personal :province="province" :place="place" news="2"></personal>
            </van-tab>
            <van-tab title="专家培训在线">
              <exports :province="province" :place="place" news="3"></exports>
            </van-tab>
          </van-tabs> -->
          <span v-if="columnview == '1'">
            <product :province="province" :place="place"></product>
          </span>
          <span v-else-if="columnview == '2'">
            <personal :province="province" :place="place"></personal>
          </span>
          <span v-else-if="columnview == '3'">
            <exports :province="province" :place="place"></exports>
          </span>
        </el-col>
        <!-- <el-col :span="24" class="foot">
          <footInfo @changetxt="changetxt"></footInfo>
        </el-col> -->
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, mapMutations, createNamespacedHelpers } from 'vuex';
import NavBar from '@/layout/common/topInfo.vue';
import footInfo from '@/layout/common/footInfo.vue';
import product from './parts/product.vue';
import personal from './parts/personal.vue';
import exports from './parts/exports.vue';
const { mapActions: dock } = createNamespacedHelpers('dock');
const { mapActions: place } = createNamespacedHelpers('place');
const jwt = require('jsonwebtoken');
export default {
  name: 'index',
  props: {},
  components: {
    NavBar,
    // footInfo,
    product,
    personal,
    exports,
  },
  data: function() {
    return {
      // 头部标题
      title: '',
      // meta为true
      isleftarrow: '',
      // 返回
      navShow: true,
      active: 0,
      // 省
      province: [],
      // 市
      place: [],
      // 显示模块
      columnview: '1',
    };
  },
  async created() {
    await this.searchPlace();
  },
  methods: {
    ...mapMutations(['setUser']),
    ...place({ palcequery: 'query', transactiondtetle: 'delete' }),
    async searchPlace() {
      let res1 = await this.palcequery({ level: 1 });
      let arr = await this.palcequery({ level: 2 });
      if (res1 || arr) {
        this.$set(this, `province`, res1.data);
        this.$set(this, `place`, arr.data);
      }
    },
    sesstoken() {
      if (this.token) {
        sessionStorage.setItem('token', this.token);
        let user = jwt.decode(this.token);
        if (user && user.uid) {
          this.setUser(user);
        }
      }
    },
    changetxt(data) {
      this.$set(this, `columnview`, data.code);
      console.log(data);
    },
    // 选择栏目
    changecolumn() {
      if (this.columnview == '1') {
        this.$set(this, `title`, '科技成果在线');
      } else if (this.columnview == '2') {
        this.$set(this, `title`, '人才对接在线');
      } else if (this.columnview == '3') {
        this.$set(this, `title`, '专家培训在线');
      }
    },
  },
  computed: {
    ...mapState(['user']),
    token() {
      return this.$route.query.token;
    },
  },
  watch: {
    token: {
      immediate: true,
      deep: true,
      handler(val) {
        // console.log(val);
        this.sesstoken();
      },
    },
    columnview: {
      immediate: true,
      deep: true,
      handler(val) {
        this.changecolumn();
      },
    },
  },
  mounted() {
    // this.title = this.$route.meta.title;
    this.isleftarrow = this.$route.meta.isleftarrow;
  },
};
</script>

<style lang="less" scoped>
.style {
  width: 100%;
  min-height: 667px;
  position: relative;
  background-color: #f9fafc;
}
.top {
  height: 46px;
  overflow: hidden;
  position: relative;
  z-index: 999;
}
.main {
  min-height: 570px;
}
.foot {
  position: absolute;
  bottom: 0;
}
</style>