cqcarbonwxapp/pages/product/product.vue

<template>
	<view class="pages">
		<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" @click="swiperClick"><image :src="'http://cqth.hw.hongweisoft.com/ht/' +item" class="pic" mode="scaleToFill"></image></view>
				</swiper-item>
			</swiper>
		</view>
		<view class="goods-name">
			<view class="name">{{product.goodsName ||'重庆市渝中区解放碑街道民生路成片林'}}</view>
			<view class="type">类别:{{product.goodsType || "T001"}}</view>
		</view>
		<view class="goods-base-info padding24">
			<view class="goods-base-info-item">产品编号:{{product.goodsCode || 'G0119000000000005468'}}</view>
			<view class="goods-base-info-item">认购期:{{time}}</view>
			<view class="goods-base-info-item">预估总释放量：{{product.carbonVal || "49330"}}kg</view>
			<view class="goods-price">
				<text class="rmb">￥</text>
				<text class="price">{{product.price || "3.00"}}/kg</text>
			</view>			
		</view>
		<view class="main-body">
			<view class="main-body-til">
				<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">地址:重庆市渝中区解放碑街道民生路</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="bottom-btn-wrap">
			<view class="bottom-btn-wrap-bg">
				<view class="bottom-btn btn">
					立即购碳
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				$getimg:this.$getimg,
				token:this.config.testToken,
				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:[],
				time:'2020',
				
				
			}
		},
		onShow() {
			
		},
		onLoad(option) {
			console.log('option',option);
			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: 'Bearer '+ this.token, //注意Bearer后面有一空格
				},
				}).then(res => {
					this.bannerList = res.data.retBody.goodsImages.split(';');
					this.product = res.data.retBody;
					console.log('res',JSON.parse(JSON.stringify(res.data.retBody)));
				}).catch(err =>{
					console.log('err',err)
				});
			},

		}
	}
</script>

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