cqcarbonwxapp/pages/product/product.vue

<template>
	<view class="pages">
		<view class="custom-nav">
			<view class="custom-nav-left" @click="$api.goback"><text class="iconfont icon-jiantou"></text></view>
			<view class="custom-nav-center"></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"
			:interval="swiper.interval" :duration="swiper.duration">
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<view class="adv-item" ><image :src="$onlineImg +item" class="pic" mode="aspectFill"></image></view>
				</swiper-item>
			</swiper>
		</view>
		<view class="goods-name">
			<view class="name">{{product.goodsName}}</view>
			<view class="type">类别:{{product.productInfos[0].productType.typeName || ""}}</view>
		</view>
		<view class="goods-base-info padding24">
			<view class="goods-base-info-item">产品编号:{{product.goodsCode}}</view>
			<view class="goods-base-info-item">认购期:{{time}}</view>
			<view class="goods-base-info-item">预估总释放量：{{product.carbonVal}}kg</view>
			<view class="goods-price">
				<text class="rmb">￥</text>
				<text class="price">{{product.price}}/kg</text>
			</view>			
		</view>
		<view class="main-body">
			<view class="main-body-til noborder">
				<view class="til">碳汇研发主体</view>
				<view class="con">
					<!-- <text>青龙村</text> -->
					<text class="iconfont icon-jiantou"></text>
				</view>
			</view>
			<!-- <view class="main-body-info">
				<image :src="$getimg+'home-buy-now-img.png'" class="main-body-info-img" mode="scaleToFill"></image>
				<view class="main-body-info-text">
					<view class="text-item">
						<text class="text">家庭成员:5人</text>
						<text class="text">涉及产品数:3</text>
					</view>
					<view class="main-body-info-text">地址:{{product.productInfos[0].povertyArea.areaAddress || ""}}</view>
				</view>
			</view> -->
		</view>
		<view class="main-body product-info">
			<view class="main-body-til">
				<view class="til">产品信息</view>
			</view>
			<view class="main-body-info">
				<view class="product-info-item">
					产品类型:
				</view>
				<view class="product-info-item">
					村小组:
				</view>
				<view class="product-info-item">
					造林主体:
				</view>
				<view class="product-info-item">
					小地名:
				</view>
			</view>
		</view>
		<view class="main-body">
			<view class="main-body-til">
				<view class="til">产品介绍</view>
			</view>
			<view class="main-body-info">
				<view class="main-body-info-text">
					<view class="main-body-info-text">{{product.productInfos[0].povertyArea.areaDesc || ""}}</view>
				</view>
			</view>
		</view>
		<view class="bottom-btn-wrap">
			<view class="bottom-btn-wrap-bg">
				<view class="bottom-btn btn" @click="randomPop">
					立即购碳
				</view>
			</view>
		</view>
		<quick-buy class="quickbuy" ref="quickBuy" @closeModal="closeModal" productType='self' :prohelpPeople='prohelpPeople' :visible="modal.visibleModal" v-if="modal.visibleModal"></quick-buy>
	</view>
</template>

<script>
	import quickBuy from '../index/modal/quickBuy';
	export default {
		components:{
			quickBuy,
			
		},
		data() {
			return {
				$getimg:this.$getimg,
				$onlineImg:this.$onlineImg,
				token:'',
				thetoken:'',
				modal: {
					visibleModal: false
				},
				params:{
					goodsId:'',
				},
				bannerList:[],
				swiper: {
					indicatorDots: true,
					autoplay: true,
					interval: 9000,
					duration: 500,
					indicatorColor:"rgba(255, 255, 255, 0.7)",
					indicatorActiveColor:"rgba(255, 255, 255, 1)",
				},
				product:null,
				prohelpPeople:[{'goodsName':'','goodsImages':'','guid':'','price':0,carbonSkin:0}],//要传递的数据
				time:'2020',
				
				
			}
		},
		onShow() {
			
		},
		onLoad(option) {
			// console.log('option',option);
			this.thetoken = 'Bearer' + ' ' + this.$store.state.token;
			this.params.goodsId = option.guid;
			this.getdetails();
		},
		methods: {
			getdetails(){
				this.$api.http.get(this.config.apiBaseurl + '/carbon-h5/wap/goods/getById?goodsId='+this.params.goodsId,{
					header: {
					Accept:'application/json',
					Authorization: this.thetoken, //注意Bearer后面有一空格
				},
				}).then(res => {
					this.bannerList = res.data.retBody.goodsImages.split(';');
					this.product = res.data.retBody;
					this.prohelpPeople[0].goodsName=res.data.retBody.goodsName;
					this.prohelpPeople[0].goodsImages=res.data.retBody.goodsImages;
					this.prohelpPeople[0].guid=res.data.retBody.guid;
					this.prohelpPeople[0].price=res.data.retBody.price;
					// 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("./product.css");
</style>