cqcarbonwxapp/pages/index/index.vue

<template>	
	<view class="content">
		<view class="hold-status-bar">
			<!-- 占据了状态栏位置 -->
		</view>
		<view class="home-top">
			<image :src="$getimg+'home-top-bg.png'" class="home-top-bg" mode="widthFix"></image>
			<view class="home-top-til">“碳汇+”生态产品价值实现</view>
			<view class="home-top-subtil">The value of ecological environment is realized</view>
		</view>
		<view class="swiper-wrap">
			<swiper class="swiper"
			:indicator-dots="swiper.indicatorDots" 
			:indicator-color="swiper.indicatorColor"  
			:indicator-active-color="swiper.indicatorActiveColor" 
			:autoplay="swiper.autoplay"
			@change="swiperChange"
			:interval="swiper.interval" :duration="swiper.duration">
				<!-- <swiper-item>
					<view class="adv-item"><image :src="$getimg +'banner01.png'" class="pic" mode="scaleToFill"></image></view>
				</swiper-item>
				<swiper-item>
					<view class="adv-item" @click="goIndex"><image :src="$getimg +'guide02.png'" class="pic" mode="scaleToFill"></image></view>
				</swiper-item> -->
				<swiper-item v-for="(item, index) in swiperList" :key="index">
					<view class="adv-item" @click="swiperClick"><image :src="$getimg +item.src" class="pic" mode="scaleToFill"></image></view>
				</swiper-item>
			</swiper>
			<view class="dots-container">
			  <view v-for="(item, index) in swiperList" :key="index">
			    <view :class="['dot', index === swiperCurrent ? 'active' : '']"></view>
			  </view>
			</view>
		</view>
		<view class="wrap40">
			<view class="title">推荐生态产品</view>
			<view class="buy-now" @click="randomPop">
				<view class="buy-now-imgwrap">
					<image :src="$getimg+'home-buy-now-img.png'" class="buy-now-img" mode="aspectFit"></image>
				</view>
				<view class="buy-now-text">
					<view class="buy-now-text-big">立即购碳</view>
					<view class="buy-now-text-small">点击去购碳哟</view>
				</view>
				<view class="buy-now-icon">
					<text class="iconfont icon-down-s"></text>
				</view>
			</view>
			<!-- buy-now end -->
			<view class="type-nav">
				<view class="type-nav-item active">
					<view class="type-nav-item-til">林业碳汇</view>
					<view class="type-nav-item-subtil">为您推荐</view>
					<image :src="$getimg+'type-nav-active.png'" class="active-bg" mode="aspectFit"></image>
				</view>
				<view class="type-nav-item">
					<!-- <view class="type-nav-item-til">新能源汽车</view>
					<view class="type-nav-item-subtil">绿色出行</view> -->
				</view>
				<view class="type-nav-item">
					<!-- <view class="type-nav-item-til">分布式光伏</view>
					<view class="type-nav-item-subtil">新能源</view> -->
				</view>
			</view>
			<view class="common-content">
				<view class="common-content-title">
					<view class="common-content-icon">
						<image :src="$getimg+'icon-tanpuhui.png'" class="icon" mode="aspectFit"></image>
					</view>
					<view class="common-content-til">
						碳汇产品展示
					</view>
					<view class="common-content-right" @click="refreshProductList">
						<image :src="$getimg+'icon-refresh.png'" class="icon" mode="aspectFit"></image>
						换一批
					</view>
				</view>
				<view class="product-list">
					<custom-nodata v-if="productList.length<=0"></custom-nodata>
					<view class="product-list-item" v-for="(item, index) in productList" :key="index" @click="productClick(item)">
						<image :src="$onlineImg + item.goodsImages | firstImg" class="product-img" mode="heightFix"></image>
						<view class="product-text">{{item.goodsName}}</view>
					</view>
				</view>
				<!-- <view class="common-content-blink">查看更多 ></view> -->
			</view>
			<!-- 碳汇产品展示 结束 -->
			<view class="title">购买排行榜</view>
			<view class="rank-wrap">
				<view class="rank-tab">
					<view class="rank-tab-item" :class="{active: rankType == 2 }" @click="rankTab(2)">
						企业排行榜
					</view>
					<view class="rank-tab-item" :class="{active: rankType == 1 }" @click="rankTab(1)">
						个人排行榜
					</view>
				</view>
				<custom-nodata v-if="rankResult.list == ''"></custom-nodata>
				<view class="rank-top" v-if="rankTop.length > 0">
					<view class="rank-top-item" v-for="(item, index) in rankTop" :key="index">
						<view class="rank-top-imgwrap">
							<image :src="$getimg+'rank-top-1.png'" v-if="item.rank == '1'" class="rank-top-bg" mode="aspectFit"></image>
							<image :src="$getimg+'rank-top-2.png'" v-if="item.rank == '2'" class="rank-top-bg" mode="aspectFit"></image>
							<image :src="$getimg+'rank-top-3.png'" v-if="item.rank == '3'" class="rank-top-bg" mode="aspectFit"></image>							
							<image :src="item.headImage" class="rank-top-photo" mode="scaleToFill"></image>
						</view>
						<view class="rank-top-name f-ellipsis">{{item.customerName}}</view>
						<view class="rank-top-carbon f-ellipsis">共购买{{item.carbonVal}}kg碳汇</view>
					</view>
					<view class="my-rank-wrap" v-if="myRank.rank">
						<view class="my-rank-photo">
							<image :src="myRank.headImage" class="photo" mode="scaleToFill"></image>
						</view>
						<view class="my-rank-text">
							<view class="my-rank">第{{myRank.rank}}名</view>
							<view class="my-rank-num">共购买{{myRank.carbonVal}}kg碳汇</view>
						</view>
					</view>
				</view>
				<!-- rank-top end -->
				<view class="rank-list-header" v-if="rankList.length>0">
					<view class="rank-list-header-rank">排名</view>
					<view class="rank-list-header-user">用户</view>
					<view class="rank-list-header-carbon">购买碳汇</view>
				</view>
				<view class="rank-list" v-if="rankList">
					<view class="rank-list-item" v-for="(item, index) in rankList" :key="index">
						<view class="rank-list-rank">{{item.rank}}</view>
						<view class="rank-list-user">
							<image :src="item.img" class="photo" mode="scaleToFill"></image>
							<view class="name f-ellipsis">{{item.customerName}}</view>
						</view>
						<view class="rank-list-carbon">共购买{{item.carbonVal}}kg<br />碳汇</view>
					</view>
				</view>
			</view>
			<!-- 购买排行榜 结束 -->
		</view>
		<!-- wrap end -->
		
		<quick-buy class="quickbuy" ref="quickBuy" @closeModal="closeModal" :visible="modal.visibleModal" v-if="modal.visibleModal"></quick-buy>
	</view>
</template>

<script>
	import quickBuy from './modal/quickBuy';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import customNodata from '@/components/custom-nodata/custom-nodata.vue';
	export default {
		components:{
			uniPopup,
			quickBuy,
			customNodata
			
		},
		data() {
			return {
				$getimg:this.$getimg,
				thetoken:'',
				modal: {
					visibleModal: false
				},
				swiper: {
					indicatorDots: false,
					autoplay: true,
					interval: 9000,
					duration: 500,
					indicatorColor:"rgba(255, 255, 255, 0.7)",
					indicatorActiveColor:"rgba(255, 255, 255, 1)",
				},
				swiperList:[
					{src:'banner01.png'},
					{src:'banner01.png'}
				],
				current: 0,
				swiperCurrent: 0,
				productList:[],
				rankType:1,
				rankTop:[],
				myRank:{},
				rankList:[],
				rankResult:{}
				
			}
		},
		onLoad() {
			this.thetoken = 'Bearer' + ' ' + this.$store.state.token;
			this.getProductList();
			this.getRank();
		},
		methods: {
			swiperChange (e) {
			    this.swiperCurrent = e.detail.current
			},
			swiperClick(){
				console.log(this.swiperCurrent);
			},
			getProductList(){
				this.$api.http.post(this.config.apiBaseurl + '/carbon-h5/wap/goodsManage/pushGoods',{"pageNo":1,"pageSize":6},{
					header: {
					Accept:'application/json',
					Authorization: this.thetoken, //注意Bearer后面有一空格
				},
				}).then(res => {
					this.productList = res.data.retBody;
					// console.log('res',JSON.parse(JSON.stringify(res.data.retBody)))
				}).catch(err =>{
					console.log('err',err)
				});
			},
			refreshProductList(){
				this.getProductList();
			},
			productClick(item){
				let id = item.guid;
				this.$api.href('/pages/product/product?guid='+id);
			},
			rankTab(type){
				this.rankType = type;
				this.getRank(type);
			},
			getRank(){
				let params = {"type":this.rankType};
				this.$api.http.get(this.config.apiBaseurl+'/carbon-h5/wap/carbonVal/getCustomerCarbonValRank',{params:params,header: {Authorization:this.thetoken}}).then(res => {
					if(!res.data.retBody){
						this.rankResult.currCustomerRankForm='';
						this.rankResult.list='';
					}else{
						this.rankResult = res.data.retBody
					};
					console.log('this.rankResult',this.rankResult);
					this.myRank = this.rankResult.currCustomerRankForm;					
					this.rankTop = this.rankResult.list.slice(0,3);
					console.log('this.rankTop',JSON.parse(JSON.stringify(this.rankTop)))
					this.rankList =this.rankResult.list.slice(3,this.rankResult.list.length);
					console.log('res',JSON.parse(JSON.stringify(res.data.retBody)))
				}).catch(err =>{
					console.log('err',err)
				});
			},
			//开启多株购碳
			randomPop() {
				this.modal.visibleModal = true;
				this.$nextTick(res => {
					// console.log('this.$refs',this.$refs.quickBuy)
					this.$refs.quickBuy.openPop();
				});
			},
			closeModal() {
				this.modal.visibleModal = false;
			},

		}
	}
</script>

<style>
@import url("./index.css");
</style>