baiyuchengpin/pages_user/user/integralGoodsDetails.vue

<template>
	<view class="content">
		<view class="cont-box">
			<view class="goods-banner" @click="showImg()">
				<view class="cartbox" @click.stop="goCart()">
					<view class="box">
						<u-badge type="error" max="99" :value="cartNum" bgColor="#DA251C"></u-badge>
					</view>
					<u-icon name="shopping-cart" color="#DA251C" size="68rpx"></u-icon>
				</view>
				<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">{{items.goodsName}}</view>
				<view class="num-box">
					<view class="x-ac">
						<view class="price">{{items.integral}} 积分</view>
						<view class="price-val" v-if="items.cash>0">+{{items.cash.toFixed(2)}} 元</view>
					</view>
					<view class="count">价值:{{items.otPrice.toFixed(2)}}元</view>
				</view>

			</view>
			<view class="desc-box">
				<view class="desc" v-html="items.descs">
				</view>
			</view>
		</view>
		<view class="btn-foot">
			<view class="p-price-box">
				<!-- <view class="p-name">兑换积分: </view> -->
				<view class="p-price">{{items.integral}}<text style="font-size: 20rpx;">积分</text></view>
				<view class="p-price" v-if="items.cash > 0">+{{items.cash.toFixed(2)}}<text
						style="font-size: 20rpx;">元</text></view>
			</view>
			<view class="btn-box">
				<view class="btn add" @click="openPop">
					加入购物车
				</view>
				<view class="btn buy" @click="submit()">
					立即兑换
				</view>
			</view>
		</view>
		<u-popup :show="show" mode="bottom" closeable @close="close">
			<view class="popbox">
				<view class="x-f">
					<image class="popbox-img" :src="items.imgUrl" mode="aspectFill"></image>
					<view class="info-text">
						<view class="price">
							<text class="unit">¥</text>
							<text class="num">{{items.cash.toFixed(2)}}</text>
							<text class="oldprice"> ¥{{items.otPrice.toFixed(2)}}</text>
						</view>
						<view class="text es-mt-16">所需积分：{{items.integral}}</view>
						<view class="desc-box es-mt-16">
							<text class="text">库存：{{items.stock>0?items.stock:'售罄'}} </text>
						</view>
					</view>
				</view>
				<!-- 数量 -->
				<view class="price-num x-bc" style="margin-top: 30rpx;">
					<view class="label">数量</view>
					<view class="num-box">
						<u-number-box v-model="num" integer :step="1" :min="1" :max="100000"></u-number-box>
					</view>
				</view>
				<view class="es-max-btn x-c" @click="addCart">
					加入购物车
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getIntegralGoodsById,
		createOrder,
		addOrUpdateCart,
		getCartCount
	} from '@/api/integral.js'
	export default {
		data() {
			return {
				imgs: [],
				activeImg: 1,
				goodsId: null,
				items: {
					cash: 0, 
					otPrice: 0, 
					integral: 0, 
					goodsName: '', 
					imgUrl: '',
					stock: 0, 
					descs: ''
				},
				show: false,
				num: 1,
				cartNum: 0
			};
		},
		onLoad(option) {
			this.goodsId = option.goodsId;
		},
		onShow() {
			this.getIntegralGoodsById();
			this.getcartNum()
		},
		methods: {
			goCart() {
				uni.navigateTo({
					url: './cart'
				})
			},
			getcartNum() {
				getCartCount().then(res => {
					if (res.code == 200) {
						this.cartNum = res.data || 0
					}
				})
			},
			close() {
				this.show = false
			},
			openPop() {
				this.num = 1
				this.show = true
			},
			addCart() {
				uni.showLoading({
					title: '处理中'
				})
				addOrUpdateCart({
					cartNum: this.num,
					goodsId: this.goodsId,
					isCart: 0
				}).then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						this.show = false
						uni.showToast({
							title: '加入购物车成功',
							icon: 'none'
						})
						this.getcartNum()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			submit() {
				this.utils.isLogin().then(
					res => {
						if (res) {
							uni.navigateTo({
								url: "./integralOrderPay?goodsId=" + this.goodsId
							})
						} else {
							uni.navigateTo({
								url: '/pages/auth/login'
							})
						}
					}
				);
			},
			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.items = res.data;
							console.log("全部是", this.items)
							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%;
	}

	.cartbox {
		position: fixed;
		bottom: 180rpx;
		right: 20rpx;
		z-index: 99;
		background-color: #fff;
		box-shadow: 0 2px 4px rgba(150, 150, 150, 0.6);
		padding: 10rpx;
		border-radius: 50%;

		.box {
			position: absolute;
			top: -10rpx;
			right: 0;
			z-index: 99;
		}
	}

	.es-mt-16 {
		margin-top: 16rpx;
	}

	.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: 34rpx;
					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: 26rpx;
						font-family: PingFang SC;
						color: #DA251C;
					}

					.duration {
						margin-left: 10rpx;
						background-color: #eee;
						border-radius: 30rpx;
						padding: 5rpx 15rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						color: #DA251C;
					}

				}

				.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: #DA251C;
						border-radius: 30rpx;
						font-size: 20rpx;
						font-family: PingFang SC;
						color: #ffffff;
					}

					.price-val {
						font-weight: bold;
						font-size: 28rpx;
						font-family: PingFang SC;
						color: #DA251C;
					}

					.count {
						font-size: 24rpx;
						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: 32rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #111111;
					}

					.line {
						margin-right: 15rpx;
						height: 30rpx;
						width: 6rpx;
						background-color: #DA251C;

					}

				}

				.desc {
					margin-top: 15rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					color: #9a9a9c;
				}
			}

		}
	}

	.btn-foot {
		box-sizing: border-box;
		width: 100%;
		height: 121rpx;
		background: #FFFFFF;
		padding: 0 32rpx 0 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;

		.p-price-box {
			.p-name {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}

			.p-price {
				margin-left: 10rpx;
				color: #FF6633;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;

			}
		}

		.btn-box {
			display: flex;
			align-items: center;

			.btn {
				width: 200rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				border-radius: 44rpx;
				margin-left: 20rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;

				&:first-child {
					margin-left: 0;
				}

				&.buy {
					background: #DA251C;
				}

				&.add {
					color: #DA251C !important;
					border: 1rpx solid #DA251C;
				}
			}

		}
	}

	.goods-banner {
		height: 756rpx;
		background-color: #FFFFFF;
		position: relative;

		.swiper-item {
			box-sizing: border-box;
		}

		.swiper,
		.swiper-item,
		.swiper-item image {
			width: 100%;
			height: 100%;
		}

		.num-box {
			width: 80rpx;
			height: 44rpx;
			line-height: 44rpx;
			text-align: center;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			background: rgba(0, 0, 0, .3);
			border-radius: 22rpx;
			position: absolute;
			right: 30rpx;
			bottom: 30rpx;
			z-index: 10;
		}
	}

	.popbox {
		padding: 40rpx 32rpx;

		&-img {
			width: 200rpx;
			height: 200rpx;
			border-radius: 20rpx;
			margin-right: 24rpx;
		}

		.oldprice {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			margin-top: 27rpx;
			line-height: 1;
			text-decoration: line-through;
			margin-left: 24rpx;
		}

		.info-text {
			height: 200rpx;

			.price {
				display: flex;
				align-items: flex-end;

				.unit {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #DA251C;
					line-height: 1.2;
					margin-right: 10rpx;
				}

				.num {
					font-size: 50rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #DA251C;
					line-height: 1;
				}
			}

			.text {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #DA251C;
			}

			.desc-box {
				display: flex;
				flex-direction: column;
				padding-bottom: 9rpx;

				.text {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
					margin-top: 27rpx;
					line-height: 1;

					&:first-child {
						margin-top: 0;
					}
				}
			}
		}
	}

	.es-max-btn {
		width: 100%;
		background-color: #DA251C;
		border-radius: 60rpx;
		margin-top: 50rpx;
		color: #fff;
		padding: 20rpx 0;
		box-sizing: border-box;
	}
</style>