shunfengche-sfd/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 === 'douyin' }" @click="selectModule('douyin')">
					<image v-if="globalImages" :src="globalImages + 'imgs/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 === 'kuaishou' }"
					@click="selectModule('kuaishou')">
					<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="输入充值金额" />
					<image v-if="globalImages" :src="globalImages + 'images/saoma.png'" style="width: 44rpx;height: 44rpx;margin-left: 15rpx;"
						mode=""></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">立即兑换</view>
		</view>
	</view>
</template>

<script>
	import { waitForGlobalImages } from '@/utils/globalImageLoader'
	export default {
		data() {
			return {
				selectedModule: 'douyin',
				globalImages: ''
			}
		},
		methods: {
			selectModule(module) {
				this.selectedModule = module;
			}
		},
		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: #00c18a;
		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: #e8fbf6;
	}

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

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