<!--
 * @Author: lvy lvy
 * @Date: 2023-05-18 19:39:44
 * @LastEditors: lvy lvy
 * @LastEditTime: 2023-05-18 19:58:12
 * @FilePath: /redmall-uniapp/pages/user/education/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view>
    <!-- 轮播图 -->
    <view class="swiper">
      <swiper :autoplay="true" indicator-dots class="swiper-wrap">
        <swiper-item v-for="(item, i) in swiperList" :key="i">
          <view class="swiper-box" @click="advertJump(item.operationCode, item.operationValue)">
            <image :src="item.ossUrl" mode="" class="swiper-item" style="border-radius: 20rpx;"></image>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <!-- 列表 -->
    <view class="list">
      <view v-if="title == '精彩课程'" class="list_item flex flex-space-between" @click="handlerItem">
        <view class="flex flex-column flex-space-between">
          商城动漫介绍视频
          <view class="font24 color-b9">
            {{ curDate }}
          </view>
        </view>
        <image class="logo" src="../../../static/dongman.jpg" mode="aspectFill"></image>
      </view>
      <view v-if="title == '分公司'" class="list_item flex flex-space-between" @click="handlerItem">
        <view class="flex flex-column flex-space-between">
          公司发展历程
          <view class="font24 color-b9">
            {{ curDate }}
          </view>
        </view>
        <image class="logo" src="../../../static/fgs.jpg" mode="aspectFill"></image>
      </view>
      <view v-if="title == '应知应会'" class="list_item flex flex-space-between" @click="handlerItem">
        <view class="flex flex-column flex-space-between">
          集团公司介绍视频
          <view class="font24 color-b9">
            {{ curDate }}
          </view>
        </view>
        <image class="logo" src="../../../static/gsjs.jpg" mode="aspectFill"></image>
      </view>
    </view>
  </view>
</template>

<script>
import url from "@/common/http/url.js";
import dayjs from 'dayjs';
export default {
  data () {
    return {
      curDate: dayjs(new Date().getTime()).format("YYYY-MM-DD"),
      swiperList: [],
      title: '',
      label: {
        精彩课程: '商城动漫介绍视频',
        应知应会: '集团公司介绍视频',
        分公司: '公司发展历程',
      }
    };
  },
  onLoad (e) {
    this.title = e.title || '';
    uni.setNavigationBarTitle({
      title: e.title
    });
    this.getAdvertising()
  },
  methods: {
    getAdvertising () {
      // 首页顶部轮播图
      this.$http("GET", url.cms.advertisingMap, { position: 1 }).then(res => {
        this.swiperList = res.data
      })
    },
    handlerItem () {
      uni.navigateTo({
        url: '/pages/user/education/detail?title=' + this.label[this.title]
      })
    }
  }
}
</script>

<style lang="scss">
.swiper {
  width: 719rpx;
  height: 290rpx;
  margin: 0 auto;
  margin-top: 32rpx;
  margin-bottom: 10rpx;

  &-wrap {
    width: 100%;
    height: 100%;
  }

  &-box {
    width: 719rpx;
    height: 100%;
    border-radius: 20rpx;
    overflow: hidden;
  }

  &-item {
    width: 100%;
    height: 100%;
  }
}

.list_item {
  padding: 0 20rpx;
  margin-top: 60rpx;

  .logo {
    width: 200rpx;
    height: 200rpx;
    border-radius: 10rpx;
  }
}
</style>
