zdtap-uniapp-main/pagesCoin/redeemOrder.vue

<template>
	<view class="page-content">
		<!-- 商品信息卡片 -->
		<view class="section">
			<view class="section-title">兑换详情</view>
			<view class="goods-info">
				<image class="goods-image" :src="detail.goodsCover" mode="aspectFill"></image>
				<view class="goods-detail">
					<text class="goods-name">{{ detail.goodsName}}</text>
					<view class="specs-info" v-if="detail.specs">
						<text class="specs-label">规格：</text>
						<text class="specs-value">{{detail.specs}}</text>
					</view>
					<view class="price-info">
						<view class="coin-amount">
							<text class="amount">{{detail.redeemedNum}}</text>
							<text class="cuIcon-rechargefill coin-icon"></text>
						</view>
						<text class="price-label">/件</text>
					</view>
				</view>
			</view>
			
			<!-- 数量选择器 -->
			<view class="quantity-selector">
				<text class="selector-label">兑换数量</text>
				<view class="selector-controls">
					<view class="control-btn minus" @click="handleMove" :class="{'disabled': form.goodsNum <= 1}">
						<text class="cuIcon-move"></text>
					</view>
					<text class="quantity">{{ form.goodsNum }}</text>
					<view class="control-btn plus" @click="handleAdd">
						<text class="cuIcon-add"></text>
					</view>
				</view>
			</view>
			
			<!-- 合计信息 -->
			<view class="total-info">
				<view class="total-row">
					<text class="total-label">合计</text>
					<view class="total-amount">
						<text class="amount">{{ totalNum}}</text>
						<text class="cuIcon-rechargefill coin-icon"></text>
					</view>
				</view>
				<view class="notice-row">
					<image src="/static/info-circle.png" class="notice-icon"></image>
					<text class="notice-text">兑换取消后啤酒币不可恢复</text>
				</view>
			</view>
		</view>
		
		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="back-button" @click="goBack">
				<text>返回</text>
			</view>
			<view class="action-button" @click="handleRedeem">
				<text>确认兑换</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getGoodsInfo,
		createOrder
	} from "@/api/bar.js"
	export default {
		data() {
			return {
				goodsId: '',
				detail: {},
				form: {
					goodsNum: 1,
					goodsId: '',
				}
			};
		},
		onLoad({
			goodsId
		}) {
			this.goodsId = goodsId
			this.form.goodsId = goodsId
			this.getDetailFun()
		},
		computed: {
			totalNum() {
				return this.form.goodsNum * this.detail.redeemedNum
			},
		},
		methods: {
			// 获取详情
			getDetailFun() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getGoodsInfo(this.goodsId).then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						this.detail = res.data
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			handleMove() {
				if (this.form.goodsNum > 1) {
					this.form.goodsNum--
				}
			},
			handleAdd() {
				this.form.goodsNum++
			},
			handleRedeem() {
				if(this.form.goodsNum == 0) {
					uni.showToast({
						title: '请选择兑换数量',
						icon: 'none'
					})
					return
				}
				uni.showModal({
					title: '提示',
					content: '确认兑换？',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								mask: true
							})
							createOrder(this.form).then(res => {
								if (res.code == 200) {
									uni.hideLoading()
									uni.showToast({
										title: '兑换成功',
										icon: 'none'
									})
									uni.redirectTo({
										url:'/pagesCoin/orderInfo?orderId=' + res.data.orderId + '&goodsId=' + this.goodsId
									})
								}
							})
						}
					}
				})
			},
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		min-height: 100vh;
		background: #F6F7FB;
		padding: 32rpx;
		padding-bottom: calc(32rpx + env(safe-area-inset-bottom) + 180rpx);
		
		/* 商品信息卡片 */
		.section {
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 32rpx;
			margin-bottom: 32rpx;
			box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
			
			.section-title {
				font-size: 40rpx;
				font-weight: 600;
				color: #333333;
				margin-bottom: 32rpx;
				position: relative;
				padding-left: 24rpx;
				
				&::before {
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 8rpx;
					height: 40rpx;
					background: #19367A;
					border-radius: 4rpx;
				}
			}
			
			.goods-info {
				display: flex;
				align-items: flex-start;
				padding: 24rpx 0;
				border-bottom: 2rpx solid #F5F5F5;
				
				.goods-image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 12rpx;
					margin-right: 24rpx;
					background: #F5F5F5;
				}
				
				.goods-detail {
					flex: 1;
					
					.goods-name {
						font-size: 32rpx;
						color: #333333;
						font-weight: 500;
						margin-bottom: 16rpx;
						line-height: 1.4;
					}
					
					.specs-info {
						display: flex;
						align-items: center;
						margin-bottom: 16rpx;
						
						.specs-label {
							font-size: 28rpx;
							color: #666666;
						}
						
						.specs-value {
							font-size: 28rpx;
							color: #333333;
						}
					}
					
					.price-info {
						display: flex;
						align-items: center;
						
						.coin-amount {
							display: flex;
							align-items: center;
							
							.amount {
								font-size: 36rpx;
								color: #333333;
								font-weight: 600;
							}
							
							.coin-icon {
								color: #FEE034;
								font-size: 36rpx;
								margin-left: 8rpx;
							}
						}
						
						.price-label {
							font-size: 24rpx;
							color: #999999;
							margin-left: 8rpx;
						}
					}
				}
			}
			
			.quantity-selector {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 32rpx 0;
				border-bottom: 2rpx solid #F5F5F5;
				
				.selector-label {
					font-size: 28rpx;
					color: #333333;
				}
				
				.selector-controls {
					display: flex;
					align-items: center;
					
					.control-btn {
						width: 64rpx;
						height: 64rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background: #F5F5F5;
						border-radius: 12rpx;
						transition: all 0.3s ease;
						
						&.disabled {
							opacity: 0.5;
							pointer-events: none;
						}
						
						&:active {
							transform: scale(0.95);
						}
						
						text {
							font-size: 32rpx;
							color: #333333;
						}
					}
					
					.quantity {
						font-size: 32rpx;
						color: #333333;
						font-weight: 500;
						margin: 0 32rpx;
						min-width: 48rpx;
						text-align: center;
					}
				}
			}
			
			.total-info {
				padding: 32rpx 0 0;
				
				.total-row {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 16rpx;
					
					.total-label {
						font-size: 28rpx;
						color: #333333;
					}
					
					.total-amount {
						display: flex;
						align-items: center;
						
						.amount {
							font-size: 40rpx;
							color: #333333;
							font-weight: 600;
						}
						
						.coin-icon {
							color: #FEE034;
							font-size: 40rpx;
							margin-left: 8rpx;
						}
					}
				}
				
				.notice-row {
					display: flex;
					align-items: center;
					
					.notice-icon {
						width: 32rpx;
						height: 32rpx;
						margin-right: 8rpx;
					}
					
					.notice-text {
						font-size: 24rpx;
						color: #999999;
					}
				}
			}
		}
		
		/* 底部操作栏 */
		.bottom-bar {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background: #FFFFFF;
			padding: 32rpx;
			padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
			backdrop-filter: blur(10px);
			-webkit-backdrop-filter: blur(10px);
			z-index: 100;
			
			.back-button {
				width: 344rpx;
				height: 88rpx;
				background: #F5F5F5;
				border-radius: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				color: #333333;
				transition: all 0.3s ease;
				margin-right: 32rpx;
				
				&:active {
					transform: scale(0.98);
					background: #EEEEEE;
				}
			}
			
			.action-button {
				width: 344rpx;
				height: 88rpx;
				background: linear-gradient(135deg, #19367A, #2C4C99);
				border-radius: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				color: #FFFFFF;
				transition: all 0.3s ease;
				box-shadow: 0 4rpx 16rpx rgba(25, 54, 122, 0.2);
				
				&:active {
					transform: scale(0.98);
					box-shadow: 0 2rpx 8rpx rgba(25, 54, 122, 0.1);
				}
			}
		}
	}
</style>