uniapp-shunfengche/my/exchange/shoppingMall.vue

<template>
	<view class="">
		<view class="margin-top" style="padding: 0 30rpx;">
			<view class="title">选择兑换平台</view>
			<view class="flex" style="justify-content: space-between; margin: 20rpx 0;">
				<view class="module" :class="{ selected: selectedModule === 1 }" @click="selectModule(1)">
					<image v-if="globalImages" :src="globalImages + 'images/my/douyin.png'" style="width: 100rpx;height: 100rpx;" mode="">
					</image>
					<view style="font-size: 33rpx;margin-top: 20rpx;">抖音兑换码</view>
					<view style="font-size: 23rpx; color: #999;margin-top: 10rpx;">输入抖音兑换码领取奖励</view>
				</view>
				<view class="module" :class="{ selected2: selectedModule === 2 }"
					@click="selectModule(2)">
					<image v-if="globalImages" :src="globalImages + 'images/my/kuaishou.png'" style="width: 100rpx;height: 100rpx;" mode="">
					</image>
					<view style="font-size: 33rpx;margin-top: 20rpx;">快手兑换码</view>
					<view style="font-size: 23rpx; color: #999;margin-top: 10rpx;">输入快手兑换码领取奖励</view>
				</view>
			</view>
		</view>
		<view class="margin-top" style="padding: 0 30rpx;">
			<view class="flex align-center" style="position: relative;">
				<view class="title">输入兑换码</view>
			</view>
			<view class="margin-top padding" style="background: #FFFFFF;border-radius: 20upx;">
				<view class="flex"
					style="margin: 20rpx 0; padding: 20rpx;border-radius: 11rpx; border: 1px #ccc solid;">
					<input class="uni-input" style="width: 90%;" placeholder="请输入兑换码" v-model="exchangeCode" />
					<image v-if="globalImages" :src="globalImages + 'images/saoma.png'" style="width: 44rpx;height: 44rpx;margin-left: 15rpx;"
						mode="" @click="scanQRCode"></image>
				</view>
			</view>
			<view class="margin-top padding" style="background: #FFFFFF;border-radius: 20upx;">
				<view class="title">使用说明</view>
				<view class="instruction-list">
					<view class="instruction-item">
						<text class="step-number">1.</text>
						<text class="step-content">在抖音/快手 APP 内获取兑换码</text>
					</view>
					<view class="instruction-item">
						<text class="step-number">2.</text>
						<text class="step-content">选择对应平台并输入兑换码</text>
					</view>
					<view class="instruction-item">
						<text class="step-number">3.</text>
						<text class="step-content">点击“立即兑换”按钮完成兑换</text>
					</view>
				</view>
			</view>
			<view class="margin-top padding" style="background: #FFFFFF;border-radius: 20upx;">
				<view class="title">注意事项</view>
				<ul class="notice-list">
					<li class="notice-item">兑换码有效期通常为 30 天，请及时兑换</li>
					<li class="notice-item">每个兑换码仅使用一次</li>
					<li class="notice-item">兑换成功奖励直接发放至账户</li>
					<li class="notice-item">如有问题请联系客服 400 - 123 - 4567</li>
				</ul>
			</view>
			<view class="login_btn" @click="handleRedeem">立即兑换</view>
		</view>
	</view>
</template>

<script>
	import { waitForGlobalImages } from '@/utils/globalImageLoader'
	export default {
		data() {
			return {
				selectedModule: 1,
				globalImages: '',
				exchangeCode: '',      // 用于显示明文
				encryptedCode: '',
				isScanned: false       // 是否是扫码
			}
		},
		methods: {
			selectModule(module) {
				this.selectedModule = module;
			},
			
			// 扫码逻辑（获取密文 -> 调用解密接口 -> 设置明文）
			scanQRCode() {
			  uni.scanCode({
				onlyFromCamera: false,
				success: (res) => {
				  this.encryptedCode = res.result;
				  console.log('扫码密文:', this.encryptedCode);
				  
					if (!this.encryptedCode) {
					  return uni.showToast({ title: '扫码结果无效', icon: 'none' });
					}
		  
					// this.isScanned = true; // 标记为扫码获取
					uni.showLoading({ title: '解密中...' });
					
					this.$Request.getT("/app/redeemCode/decryptAES?encryptedData=" + this.encryptedCode)
					.then(res => {
						uni.hideLoading();
						if (res.code === 0 && res.data) {
						  this.exchangeCode = res.data; // 解密成功，赋值明文
						  this.isScanned = true;
						} else {
						  this.exchangeCode = '';
						  this.isScanned = false;
						  uni.showToast({ title: res.msg || '解密失败', icon: 'none' });
						}
					  })
					  .catch(err => {
						uni.hideLoading();
						this.exchangeCode = '';
						this.isScanned = false;
						uni.showToast({ title: '解密接口异常', icon: 'none' });
						console.error('解密错误:', err);
					});
				},
				fail: (err) => {
				  uni.showToast({ title: '扫码失败', icon: 'none' });
				  console.error('扫码失败:', err);
				}
			  });
			},
		
			// 点击“立即兑换”
			handleRedeem() {
			  if (!this.exchangeCode) {
				return uni.showToast({ title: '请输入兑换码', icon: 'none' });
			  }
		
			  uni.showLoading({ title: '兑换中...' });
		
			  // 如果是扫码（走解密流程后），调用正式兑换接口
			  if (this.isScanned) {
				this.$Request.getT("/app/redeemCode/useRedeemCode?platform=" + this.selectedModule + '&encryptedData=' + this.encryptedCode)
				  .then(res => {
				    uni.hideLoading();
				    if (res.code === 0) {
				      uni.showToast({ title: '兑换成功', icon: 'success' });
				      this.resetFields();
				    } else {
				      uni.showToast({ title: res.msg || '兑换失败', icon: 'none' });
				    }
				  })
				  .catch(err => {
				    uni.hideLoading();
				    uni.showToast({ title: '请求出错', icon: 'none' });
				    console.error('兑换失败:', err);
				  });
			  } else {
				// 手动输入走正常兑换
				this.$Request.getT("/app/redeemCode/useRedeemCode?platform=" + this.selectedModule + '&cdk=' + this.exchangeCode)
				  .then(res => {
				    uni.hideLoading();
				    if (res.code === 0) {
				      uni.showToast({ title: '兑换成功', icon: 'success' });
				      this.resetFields();
				    } else {
				      uni.showToast({ title: res.msg || '兑换失败', icon: 'none' });
				    }
				  })
				  .catch(err => {
				    uni.hideLoading();
				    uni.showToast({ title: '请求出错', icon: 'none' });
				    console.error('兑换失败:', err);
				  });
			  }
			},
		
			// 重置表单
			resetFields() {
			  this.exchangeCode = '';
			  this.encryptedCode = '';
			  this.isScanned = false;
			}
		},
		onLoad() {
			waitForGlobalImages().then((path) => {
			    console.log('✅ 全局图片路径:', path)
			    this.globalImages = path
			  })
		},
		mounted() {

		}
	}
</script>

<style scoped>
	.title {
		font-size: 33rpx;
		font-family: PingFang SC;
		color: #333333;
	}

	.instruction-list {
		display: flex;
		flex-direction: column;
		gap: 15rpx;
		margin-top: 20rpx;
	}

	.instruction-item {
		display: flex;
		align-items: flex-start;
	}

	.step-number {
		font-size: 28rpx;
		color: #666;
		margin-right: 15rpx;
	}

	.step-content {
		font-size: 28rpx;
		color: #666;
		line-height: 1.5;
	}

	.notice-list {
		margin-top: 20rpx;
		list-style-type: none;
		padding: 0;
	}

	/* 注意事项列表项 */
	.notice-item {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
		position: relative;
		padding-left: 30rpx;
		margin-bottom: 10rpx;
	}

	/* 自定义列表项前面的圆点 */
	.notice-item::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 10rpx;
		height: 10rpx;
		background-color: #666;
		border-radius: 50%;
	}

	.login_btn {
		width: 100%;
		margin: 60rpx auto;
		text-align: center;
		background: #fe6b01;
		height: 80rpx;
		border-radius: 16rpx;
		color: #ffffff;
		line-height: 80rpx;
	}

	.module {
		width: 45%;
		height: 300rpx;
		border-radius: 16rpx;
		padding: 40rpx;
		text-align: center;
		border: #e5e7eb 1rpx solid;
	}

	.module:nth-child(1) {
		background: #fee8d9;
	}

	.module:nth-child(2) {
		background: #ecf5ff;
	}

	.selected {
		border-color: #fe6b01;
	}
	.selected2 {
		border-color: #409eff;
	}
</style>