cqcarbonwxapp/pages/index/index.vue

<template>
	<view class="content">
		<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">
					<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 == 1 }" @click="rankTab(1)">
						企业排行榜
					</view>
					<view class="rank-tab-item" :class="{active: rankType == 2 }" @click="rankTab(2)">
						个人排行榜
					</view>
				</view>
				<view class="rank-top">
					<view class="rank-top-item" v-for="(item, index) in rankTop" :key="index">
						<view class="rank-top-imgwrap">
							<image :src="$getimg+'rank-top01.png'" class="rank-top-bg" mode="aspectFit"></image>
							<image :src="item.img" class="rank-top-photo" mode="scaleToFill"></image>
						</view>
						<view class="rank-top-name f-ellipsis">{{item.name}}</view>
						<view class="rank-top-carbon f-ellipsis">共购买{{item.carbon}}kg碳汇</view>
					</view>
					<view class="my-rank-wrap">
						<view class="my-rank-photo">
							<image :src="myRank.img" class="photo" mode="scaleToFill"></image>
						</view>
						<view class="my-rank-text">
							<view class="my-rank">第{{myRank.rank}}名</view>
							<view class="my-rank-num">共购买{{myRank.carbon}}kg碳汇</view>
						</view>
					</view>
				</view>
				<!-- rank-top end -->
				<view class="rank-list-header">
					<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">
					<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.name}}</view>
						</view>
						<view class="rank-list-carbon">共购买{{item.carbon}}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';
	export default {
		components:{
			uniPopup,
			quickBuy,
			
		},
		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:[
					{name:'酉阳土家族苗',carbon:1000,img:'http://qny.gzsdtfp.com/gzth005/imgupload/39b6b37e61e240c98e4c8ca392c5f3a5.jpg'},
					{name:'酉阳土家族苗',carbon:1000,img:'http://qny.gzsdtfp.com/gzth005/imgupload/39b6b37e61e240c98e4c8ca392c5f3a5.jpg'},
					{name:'酉阳土家族苗',carbon:1000,img:'http://qny.gzsdtfp.com/gzth005/imgupload/39b6b37e61e240c98e4c8ca392c5f3a5.jpg'},					
				],
				myRank:{name:'家族苗',carbon:1000,rank:11,img:'http://qny.gzsdtfp.com/gzth005/imgupload/39b6b37e61e240c98e4c8ca392c5f3a5.jpg'},
				rankList:[
					{name:'家族苗',carbon:1000,rank:'04',img:'http://qny.gzsdtfp.com/gzth005/imgupload/39b6b37e61e240c98e4c8ca392c5f3a5.jpg'},
					{name:'家族苗',carbon:1000,rank:'05',img:'http://qny.gzsdtfp.com/gzth005/imgupload/39b6b37e61e240c98e4c8ca392c5f3a5.jpg'},
					{name:'家族苗',carbon:1000,rank:'06',img:'http://qny.gzsdtfp.com/gzth005/imgupload/39b6b37e61e240c98e4c8ca392c5f3a5.jpg'},
					{name:'家族苗',carbon:1000,rank:'07',img:'http://qny.gzsdtfp.com/gzth005/imgupload/39b6b37e61e240c98e4c8ca392c5f3a5.jpg'},
				],
				
			}
		},
		onLoad() {
			this.thetoken = 'Bearer' + ' ' + this.$store.state.token;
			this.getProductList();
		},
		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: 'Bearer '+ 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(type){
				this.$api.http.post(this.config.apiBaseurl + '/carbon-h5/wap/goodsManage/pushGoods',{"pageNo":1,"pageSize":6},{
					header: {
					Accept:'application/json',
					Authorization: 'Bearer '+ 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)
				});
			},
			//开启多株购碳
			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>