<template>
	<view class="commonPageBox" style="">
	  <view class="header_box">
	    <view class="header_bg" :style="`margin-top:${statusBarHeight * 2}rpx`">
	      <text class="PM_font" style="color: #d93737;">太湖公益</text>
	    </view>
	  </view>
	  <view
	    class="main_content_box"
	    :style="`height:calc(100vh - ${(120 + statusBarHeight) * 2}rpx)`"
	  >
			<view class="curriculum_box cate_box">
				  <view
					:style="`background-image: url('${
					  currentCate == i ? v.activeImage : v.image
					}');color:${currentCate == i ? '#fff' : '#7dc1f0'} !important;`"
					class="curriculum_item_box icon_bg"
					v-for="(v, i) in curriculumList"
					@click="handleClickCurriculum(v, i)"
				  >
					<view
					  class="curriculum_item_name"
					  style="margin-left: 100rpx"
					  :style="`;color:${currentCate == i ? '#fff' : v.color} !important;`"
					  >{{ v.name }}</view>
				  </view>
			</view>
			<view class="flash_sale_box" v-if="currentCate == 0">
			  <view class="flash_sale_content">
				<scroll-view
				  scroll-y="true"
				  class="scroll-Y"
				  style="height: 100%;width: 100%;"
				>
				  <view
					class="scroll-view-item flash_sale_content_item"
					v-for="(v, i) in goodsList"
					 @click="goGoodsDetail(v)"
				  >
					<image class="book_image" :src="v.productImages" mode="aspectFit"></image>
					<view class="book_content">
					  <view class="book_name">{{ v.productName }}</view>
					</view>
				  </view>
				</scroll-view>
			  </view>
			</view>
			<view class="flash_sale_box" v-if="currentCate == 1">
			  <view class="flash_sale_content">
			    <common-list
			      style="height: 100%;width: 100%;"
			      noDataIcon="data"
			      :isCondition="true"
			      :dataList="noticeList"
			      @hancleClick="gotoDetail"
			      label="title"
			    >
			      <template slot="labelSlot" slot-scope="slotProps">
			        <view class="related_courses_name hidden1">{{ slotProps.row.title }}</view>
			      </template>
			    </common-list>
			  </view>
			</view>
		</view>
		<view class="footer_box" @click.stop="toHome()">
			<view class="footer_item">
				<view class="footer_nav_item">
					<image class="footer_item_image" src="/static/tab/home.png" mode="aspectFit"></image>
					<text class="footer_item_text">首页</text>
				</view>
			</view>
			<view class="footer_item" @click.stop="toTaihu()">
				<view class="footer_nav_item">
					<image class="footer_item_image" src="/static/tab/thgy_active.png" mode="aspectFit"></image>
					<text class="footer_item_text footer_item_text_active">太湖公益</text>
				</view>
			</view>
			<view class="footer_item" @click.stop="toMine()">
				<view class="footer_nav_item">
					<image class="footer_item_image" src="/static/tab/mine.png" mode="aspectFit"></image>
					<text class="footer_item_text">我的</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentCate: 0,  //tab
			goodsList: [],
			noticeList: [],
			curriculumList: [
			  {
			    name: "太湖商品",
			    url: "/pages/courseInformation/index/index",
			    color: "#d93737",
			    image: require("@/static/icon/taihuicon2.png"),
			    activeImage: require("@/static/icon/taihuicon2_active.png"),
			  },
			  {
			    name: "太湖之光",
			    url: "/pages/curriculum/index/index",
			    color: "#7dc1f0",
			    image: require("@/static/icon/taihuicon1.png"),
			    activeImage: require("@/static/icon/taihuicon1_active.png"),
			  }
			],
			
			
		}
	},
	onShow() {
		this.getGoodsList();
	},
	methods: {
		//获取数据
		async getGoodsList() {
			this.$http.request({
				url: 'visitor/getTaihuWelfareProductList',
				method: "POST",
				data: {
					limit: 10,
					page: 1
				},
				header: {
					"Content-Type": "application/json",
				},
			})
			.then(async (res)=> {
				if(res.page.records&&res.page.records.length>0){
					this.goodsList = res.page.records;
				}
			});
		},
		//点击tab
		async handleClickCurriculum(v, index) {
		  this.currentCate = index;
		  if (index == 0) {
		    this.goodsList = [];
		    await this.getGoodsList();
		  }
		  if (index == 1) {
		    this.noticeList = [];
		    await this.getArticle();
		  }
		  this.$forceUpdate();
		},
		//获取数据
		async getArticle() {
		  this.$http
		    .request({
		      url: 'visitor/getTaihuWelfareArticleList',
		      method: "POST",
		      data: {
				  limit: 10,
				  page: 1
			  },
		      header: {
		        "Content-Type": "application/json",
		      },
		    })
		    .then(async (res) => {
		      if (res.code == 0 && res.page && res.page.records.length > 0) {
		        this.noticeList = this.noticeList.concat(res.page.records);
		        this.$forceUpdate();
		      }
		    })
		    .catch((e) => {
				console.log(e);
		    });
		},
		//商品信息
		goGoodsDetail(v) {
		  uni.navigateTo({
		    url: `/pages/visitor/goods?isMiaosha=0&id=${v.productId}`,
		  });
		},
		//文章详情
		gotoDetail(data) {
		  uni.navigateTo({
		    url: `/pages/visitor/taihuDetail?id=${data.id}&type=taihu`,
		  });
		},
		
		//首页
		toHome(){
			uni.navigateTo({
				url: '/pages/visitor/index'
			})
		},
		//太湖公益
		toTaihu(){
			uni.navigateTo({
				url: '/pages/visitor/taihu'
			})
		},
		//我的
		toMine(){
			uni.navigateTo({
				url: '/pages/visitor/mine'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
@import "@/static/mixin.scss";
.header_box {
  width: 100%;
  height: 260rpx;
 

  display: flex;
  justify-content: center;
  overflow: hidden;

  color: #fff;
  font-size: 80rpx;
  line-height: 260rpx;
}
.cate_box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  padding-top: 40rpx;

  .icon_bg {
    width: 48%;
    height: 80rpx;
    line-height: 80rpx;

    background-repeat: no-repeat;

    background-size: 100% 100%;

    color: #018f89;
    font-size: 48rpx;
  }
}

.main_content_box {
  width: 100%;
  margin-top: 0rpx;
  background-color: rgba(255, 255, 255, 0.65);
  padding: 27rpx;
  //   padding-top: 0rpx;
  box-sizing: border-box;
  // padding-top: 75rpx;

  .curriculum_box {
    width: 100%;
    // height: 198rpx;

    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0px 37rpx 17rpx;
    box-sizing: border-box;

    .curriculum_item_box {
      height: 100%;
      display: flex;
      align-items: center;

      .curriculum_item_img {
        width: 39rpx;
        height: 38rpx;
        float: left;
      }

      .curriculum_item_name {
        margin-top: -10rpx;
        font-family: MicrosoftYaHei;
        font-weight: bold;
        font-size: 30rpx;
        color: #001b73;
        margin-left: 21rpx;
        // line-height: 46rpx;
      }
    }
  }

  .flash_sale_box {
    height: calc(100% - 100rpx);
    // animation: example1 1s ease-out 0s backwards;
    width: 100%;
    margin-top: 33rpx;
    margin-bottom: 10rpx;

    .flash_sale_top {
      width: 100%;
      height: 61rpx;
      background: #b7e0e2;
      box-shadow: 0rpx 0rpx 6rpx 0rpx #e9dccc;
      border-radius: 7rpx;
      padding: 3rpx 18rpx 3rpx 10rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      margin-bottom: 21rpx;

      .miaoShaIcon {
        margin-right: 16rpx;
      }

      .miaoShaTitle {
        margin-right: 25rpx;

        font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
        font-weight: normal;
        font-size: 35rpx;
        color: #018f89;
        line-height: 46rpx;
      }

      .miaoShaContent {
        width: calc(100% - 172rpx);
        margin-top: 1rpx;
        font-family: Microsoft YaHei;
        font-weight: 600;
        font-size: 21rpx;
        color: #018f89;
        // line-height: 45rpx;
      }
    }
  }

  .flash_sale_content {
    width: 100%;
    display: flex;
    overflow: hidden;
    height: 100%;

    .flash_sale_content_item {
      position: relative;
      display: inline-block;
      width: 48%;
      background-color: #fff;
      float: left;
      border-radius: 10rpx;
      margin-right: 4%;
      overflow: hidden;
      margin-bottom: 20rpx;
    }
    .active_price {
      position: absolute;
      top: 0rpx;
      right: 0rpx;
      width: 70rpx;
      height: 72rpx;
      background-repeat: no-repeat;
      line-height: 50rpx;
      background-size: 100% 100%;
      background-image: url("@/static/icon/taihuactiveprice.png");

      color: #fff;
      font-size: 20rpx;
      font-weight: bold;
      text-align: center;
      //   margin-top: -10rpx;
      //   box-shadow: 0 0 30px 0 rgb(255, 255, 255);
    }
    .flash_sale_content_item:nth-child(2n) {
      margin-right: 0;
    }
    .book_image {
      width: 100%;
      height: 192rpx;
      //   border-radius: 10rpx;
      background-color: #e9e9e9;
    }
    .book_content {
      padding: 20rpx 15rpx 10rpx;
    }
    .book_name {
      font-family: MicrosoftYaHei;
      font-weight: 600;
      font-size: 24rpx;
      line-height: 24rpx;
      height: 50rpx;
      color: #020001;
      //   text-align: center;
      //   margin-top: 18rpx;
      letter-spacing: 1rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.scroll-X {
  width: 100%;
  height: 100%;
  white-space: nowrap;
}

.commonPageBox {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("@/static/icon/taihubg.png");
}

.noticeIcon {
  width: 20rpx;
}

.u-notice-bar {
  background-color: transparent !important;
}

.bottomBox {
  width: 100%;
  height: 200rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .item_img {
    width: 48% !important;
    height: 100%;

    image {
      width: 100%;
      height: 100%;
    }
  }
}
.book_price {
  display: flex;
  align-items: center;
}
.book_price_current {
  color: #ff5b36;
  font-weight: bold;
  .price_icon {
    font-size: 22rpx;
  }
}
.book_price_old {
  color: #9c9a9b;
  font-size: 20rpx;
  margin-left: 10rpx;
  //  margin-top: -4rpx;
  font-weight: normal;
  text-decoration: line-through;
}
.sumSales {
  color: #6c6c6c;
  font-size: 20rpx;

  font-weight: normal;
}
.bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/deep/.list_item {
  background-color: #fff;
  display: flex;
  align-items: center !important;
  border-bottom: none;
  padding: 10rpx 0 !important;
  padding-right: 10rpx !important;
  margin-bottom: 10rpx;
  border-radius: 10rpx;
  padding-left: 20rpx !important;
  font-size: 24rpx;
  font-weight: bold;
  color: #020001;
  .rightArrow {
    width: 28rpx;
    height: 28rpx;
  }
  .titleItem {
  }
}
/deep/.scroll-view-item:nth-child(2n-1) {
  // background-color: #B7E0E2 !important;
  background-color: #fff !important;
}
.footer_box {
	height: 90rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	display: flex;
	box-sizing: content-box;
	background: #fff;
	padding-top: 5rpx;
}
.footer_item {
	position: relative;
	flex: 1;
}

.footer_nav_item {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
}
.footer_item_text {
	font-size: 12px;
	color: #333;
	margin-top: 4rpx;
}

.footer_item_text_active {
	color: #7dc1f0 !important;
}

.footer_item_image {
	width: 24px;
	height: 24px;
}
</style>
