video_mini/pagesA/integral/ItemDetails.vue

<template>
	<view class="pagesContent">
		<view class="navBack">
			<uni-icons class="backIcon" type="left" size="24" color="#333" @click="navBack"></uni-icons>
			商品详情
		</view>

		<view class="Content">
			<!-- 轮播图 -->
			<view>
				<swiper class="home-swiper-banner" style="height: 750rpx;" indicator-color="rgba(255, 255, 255, 0.3)"
					indicator-active-color="#FFFFFF" :indicator-dots="true" :autoplay="true" :interval="3000"
					:duration="500">
					<swiper-item v-for="(item,index) in detailsdata.cimages" :key="index" @tap="detail(item.link,0)">
						<image style="width: 100%;height: 750rpx;" :src="item" mode="aspectFill">
						</image>
					</swiper-item>
				</swiper>
			</view>
			<!-- 商品信息 -->
			<view class="commodity flex alcenter">
				<view class="flex ml15 alcenter">
					<view class="mr20">
						<text class="ft24 ftw500">{{detailsdata.price}}</text>
						<text class="ft14 ftw500">积分</text>
					</view>
					<text class="ftw500"
						style="padding: 4rpx 28rpx; color: #FFC4CF; font-size: 22rpx;background-color: #FF3E62; border-radius: 20rpx;">兑换{{detailsdata.sale_num}}</text>
				</view>
				<view class="ftw500" style="margin-right: 56rpx;font-size: 52rpx;text-align: center;">
					<view class="">{{score}}</view>
					<view class="ft12 ftw500" style="color: #969CD7;">当前积分</view>
				</view>
			</view>
			<view class="informationbox">
				<view class="name text-over">{{detailsdata.name}}</view>
				
				<!-- <view class="specifications ">
					<view class="">规格：12354</view>
					<uni-icons type="right" size="12" color="#333" style="margin-right: 24rpx;"></uni-icons>
				</view> -->
				<view class="specifications ">
					<view class="">库存：{{detailsdata.stock_num}}</view>
					<uni-icons type="right" size="12" color="#333" style="margin-right: 24rpx;"></uni-icons>
				</view>
				
				<!-- 底部 照片 -->
				<view class="imgsbxo">
					<view class="imgtop flex alcenter center">
						<view class="imgtop_left"></view>
						<text>商品详情</text>
						<view class="imgtop_right"></view>
					</view>
					<view class="" style="font-size: 0;" v-for="(item,index) in detailsdata.cimages">
						<image style="width: 100%;" :src="item" mode="aspectFill">
						</image>
					</view>
				</view>
			</view>

			<view class="bottom_button">
				<view class="exchange" @click="clickexchange(detailsdata.id)">立即兑换</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banners: [{}, {}, {}, {}, {}],
				
				score:"",
				detailsdata:{}
			}
		},
		onLoad(e) {
			console.log('e', e.id)
			// this.shanchu(7)
			this.getuser()
			//实际
			this.shanchu(e.id)

		},
		methods: {
			shanchu(id) {
				this.$httpRequest({
					url: '/api/delivery/goods/info',
					methods: "POST",
					data: {
						goods_id: id
					},
				}).then(res => {
					if(res.code == 1){
						this.detailsdata = res.data
						console.log(this.detailsdata);
					}
				}).catch(err => {

				})
			},
			//获取 用户积分
			getuser() {
				this.$httpRequest({
					url: '/api/user/index',
					methods: "POST",
				}).then(res => {
					console.log(res.data.score);
					this.score = res.data.score
				}).catch(err => {})
			},

			navBack() {
				uni.navigateBack(1);
			},
			clickexchange(id) {
				uni.navigateTo({
					url: '/pagesA/integral/commodityOrder?id=' + id
				})
			}
		}
	}
</script>

<style scoped>
	.pagesContent {
		/* position: relative; */
		background-color: #F7F8F9;
	padding-top: 58rpx;
	}

	.navBack {
		font-size: 32rpx;
		color: #333333;
		font-weight: 600;
		text-align: center;
		height: 160rpx;
		line-height: 160rpx;
		position: relative;
		z-index: 1;
	}

	.backIcon {
		position: absolute;
		left: 16rpx;
		top: 0rpx;
	}

	.Content {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		width: 100%;
	}

	.commodity {
		background: url(https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/commodity_bg.png);

		background-repeat: no-repeat;
		background-size: 750rpx 136rpx;
		height: 136rpx;
		margin-top: -16rpx;
		z-index: 1;
		position: relative;
		color: #ffffff;
		justify-content: space-between;
	}

	.informationbox {
		margin-bottom: 160rpx;
	}

	.name {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		background-color: #fff;
		padding-left: 34rpx;
		margin-bottom: 20rpx;
	}

	.specifications {
		height: 100rpx;
		line-height: 100rpx;
		background-color: #fff;
		padding-left: 34rpx;
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.imgsbxo {}

	.imgtop {
		height: 100rpx;
		line-height: 100rpx;
		background-color: #fff;
	}

	.imgtop_left {
		width: 100rpx;
		height: 10rpx;
		margin-right: 20rpx;
		background: linear-gradient(90deg, rgba(28, 28, 29, 0) 0%, #D8D8D8 100%);
	}

	.imgtop_right {
		width: 100rpx;
		height: 10rpx;
		margin-left: 20rpx;
		background: linear-gradient(270deg, rgba(28, 28, 29, 0) 0%, #D8D8D8 100%);
	}

	.bottom_button {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 160rpx;
		z-index: 1;
		background: #ffffff;
	}

	.exchange {
		margin: 16rpx 28rpx 0 28rpx;
		height: 80rpx;
		background-color: #FFD8A9;
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
	}
</style>