his_user_miniapp/pages_user/integralGoodsDetails.vue

<template>
	<view class="content">
		<view class="cont-box">
			<view class="goods-banner" @click="showImg()">
				<swiper
					class="swiper" 
					:indicator-dots="false" 
					:circular="true" 
					:autoplay="true" 
					:interval="3000" 
					:duration="1000"
					indicator-color="rgba(255, 255, 255, 0.6)"
					indicator-active-color="#ffffff"
					@change="swiperChange"
				>
					<swiper-item  class="swiper-item" v-for="(item,index) in  imgs" :key="index">
						<image :src="item" mode="aspectFit"></image>
					</swiper-item>
				</swiper>
				<!-- 数量 -->
				<view class="num-box">{{ activeImg }}/{{ imgs.length }}</view>
			</view>
			<view class="integral-box">
				<view class="title">{{item.goodsName}}</view>
				<view class="num-box">
					<view class="price"  >{{item.integral}} 积分</view>
					<view class="count">原价:{{item.otPrice.toFixed(2)}}元</view>
				</view>
				 
			</view>
			<view class="desc-box">
				<view class="desc" v-html="item.descs" >
					
				</view>
			</view>
		</view>
		<view class="btn-foot">
			<view class="p-price-box">
				<view class="p-name">兑换积分: </view>
				<view class="p-price"  >{{item.integral}}</view>
			</view>
			<view class="btn-box">
				<view class="btn buy" @click="submit()"  >
					立即兑换
				</view>
			</view>
		</view>
	</view> 
</template>

<script>
	import {getIntegralGoodsById,createOrder} from '@/api/integral.js'
	export default {
		data() {
			return {
				imgs:[],
				activeImg: 1,
				goodsId:null,
				item:{},
			};
		},
		onLoad(option) {
			this.goodsId=option.goodsId;
			 
		},
		onShow() {
			this.getIntegralGoodsById();
		},
		methods:{
			submit(){
				uni.navigateTo({
					url: "./integralOrderPay?goodsId="+this.goodsId
				})
			},
			swiperChange(event) {
				this.activeImg = event.detail.current + 1
			},
			 
			showImg() {
				 //预览图片
				 uni.previewImage({
				 	urls: this.imgs,
				 	current: this.imgs[0]
				 });
			},
			getIntegralGoodsById(){
				let data = {goodsId:this.goodsId};
				getIntegralGoodsById(data).then(
					res => {
						if(res.code==200){
							this.item=res.data;
							if(res.data.images!=null){
								this.imgs=res.data.images.split(",")
							}
							else{
								this.activeImg=0;
							}
							console.log(this.imgs)
						}else{
							uni.showToast({
								icon:'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.content{
		height: 100%;
		display: flex;
		flex-direction: column;
		 
		.cont-box{
			padding-bottom: 121rpx;
			.integral-box{
				background-color: #fff;
				padding: 20rpx;
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: flex-start;
				 
				.title{
					font-weight: bold;
					font-size: 34upx;
					font-family: PingFang SC;
					color: #111;
				}
				.desc{
					margin-top: 15rpx;
					display: flex;
					align-items: flex-start;
					justify-content: flex-start;
					.cycle{
						background-color: #eee;
						border-radius: 30rpx;
						padding: 5rpx 15rpx;
						font-size: 26upx;
						font-family: PingFang SC;
						color: #C39A58;
					}
					.duration{
						margin-left: 10rpx;
						background-color: #eee;
						border-radius: 30rpx;
						padding: 5rpx 15rpx;
						font-size: 26upx;
						font-family: PingFang SC;
						color: #C39A58;
					}
					
				}
				.num-box{
					margin-top: 15rpx;
					flex: 1;
					display: flex;
					align-items: flex-end;
					justify-content: space-between;
					width: 100%;
					.price{
						padding: 5rpx 10rpx;
						background-color: #C39A58;
						border-radius: 30rpx;
						font-size: 20upx;
						font-family: PingFang SC;
						color: #ffffff;
					}
					
					.count{
						font-size: 24upx;
						font-family: PingFang SC;
						color: #333333;
					}
					
				}
				
				 
			}
			.desc-box{
				background-color: #fff;
				padding: 20rpx;
				margin-top: 10rpx;
				.title-box{
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-start;
					.title{
						font-size: 32upx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #111111;
					}
					.line{
						margin-right: 15rpx;
						height: 30rpx;
						width: 6rpx;
						background-color: #C39A58;
						
					}
					 
				}
				.desc{
					margin-top: 15rpx;
					font-size: 28upx;
					font-family: PingFang SC;
					color: #9a9a9c;
				}
			}
			 
		}
	}
	 
	.btn-foot{
		box-sizing: border-box;
		width: 100%;
		height: 121upx;
		background: #FFFFFF;
		padding: 0 32upx 0 28upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		.p-price-box{
			display: flex;
			align-items: center;
			.p-name{
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}
			.p-price{
				margin-left: 10rpx;
				color: #FF6633;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
				
			}
		}
		 
		.btn-box{
			display: flex;
			align-items: center;
			.btn{
				width: 200upx;
				height: 88upx;
				line-height: 88upx;
				text-align: center;
				border-radius: 44upx;
				margin-left: 20upx;
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				&:first-child{
					margin-left: 0;
				}
			 
				&.buy{
					background: #C39A58;
				}
				 
			}
			
		}
	}
	 
	.goods-banner{
		height: 756upx;
		background-color: #FFFFFF;
		position: relative;
		.swiper-item{
			box-sizing: border-box;
		}
		.swiper,
		.swiper-item,
		.swiper-item image{
			width: 100%;
			height: 100%;
		}
		.num-box{
			width: 80upx;
			height: 44upx;
			line-height: 44upx;
			text-align: center;
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			background: rgba(0, 0, 0, .3);
			border-radius: 22upx;
			position: absolute;
			right: 30upx;
			bottom: 30upx;
			z-index: 10;
		}
	}
</style>