scancode-miro/pages/cjx/index/authCode.vue

<template>
	<view class="intro-page common">
		<view class="top-class"></view>
		<view class="title">
			超吉炫
		</view>
		<view class="head">
			<u-row class="row-class">
				<u-col span="4">
					<image class="logo-img"
						src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/logo.png"
						mode="aspectFit" />
				</u-col>
				<u-col span="4">
					<image class="commodity-img"
						src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/commodity.png"
						mode="aspectFit" />
				</u-col>
				<u-col span="4">
					<image class="logo-rules"
						src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/rules.png" @click="openDetail" />
				</u-col>
			</u-row>
		</view>

		<view class="topImg">
			<image class="img_1" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/topImg.png"
				mode="heightFix" />
		</view>
		<view class="topImg">
			<image class="img_2" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/topImg_2.png"
				mode="heightFix" />
		</view>
		<view class="content">
			<view class="title-1">

			</view>

			<view class="detail">
				<view class="text-detail">
					您所查询的是超吉炫新型低纤槟榔胶果，是正牌产品，感谢您的购买!
				</view>
				<view class="" style="padding: 20rpx;">
					<u-row class="row-class">
						<u-col span="9">
							<u--input placeholder="输入包装内侧验证码" border="surround" v-model="value" color="#fff" ></u--input>
						</u-col>
						<u-col span="3">
							<u-button text="开始抽奖" class="custom-style" color="#E22ADD" @click="startDraw" ></u-button>
						</u-col>

					</u-row>
				</view>
				<view class="hint">
					实物大奖:如您中实物，请凭中奖外包袋兑奖，谢谢！
				</view>

			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<CustomTabbar />

	</view>
</template>

<script>
	import {
		getScanData,
		confirmCode
	} from '@/api/scan'
	import CustomTabbar from '@/components/tabbar_cjx.vue';
	export default {
		components: {
			CustomTabbar
		},
		data() {
			return {
				scanUserData: {},
				prizeJson: {},
				value: '',
				scanCode: ''
			}
		},
		onLoad() {
			this.scanCode = uni.getStorageSync('scanCode');

		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			openDetail() {
				uni.navigateTo({
					url: '/pages/cjx/index/rules'
				});
			},
			startDraw() {
				confirmCode(this.scanCode, this.value).then(res => {
					if (res.code === 0) {
						getScanData(this.scanCode).then(res => {
							if (res.code === 0) {
								// 获取当前页面路径
								const pages = getCurrentPages();
								const currentPage = pages[pages.length - 1];
								const route = currentPage.route;
								const dirPath = route.substring(0, route.lastIndexOf('/'));
								let url = '/' + dirPath + '/index';
								uni.setStorageSync('scanDetail', res.data);
								uni.redirectTo({
									url: url
								})
							}else {
                let params = {
                  type: "error",
                  title: "失败",
                  message: res.msg,
                  iconUrl: "https://uviewui.com/demo/toast/error.png",
                }
                this.$refs.uToast.show({
                  ...params
                });
              }
						})
					} else {
						let params = {
							type: "error",
							title: "失败",
							message: res.msg,
							iconUrl: "https://uviewui.com/demo/toast/error.png",
						}
						this.$refs.uToast.show({
							...params
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url('../../../static/scss/common_cjx.css');

	.row-class {
		height: 60rpx;
	}



	.theme-text {
		height: 10vh;
		text-align: center;
		line-height: 11vh;

		.textImage {
			height: 80rpx;
			width: 400rpx;
		}
	}

	.title-1 {
		text-align: center;
		color: #A7001C;
		font-size: 18px;
		letter-spacing: 4px;
		font-weight: 600;
	}

	.winning-picture {
		height: 460rpx;
		background-image: url(https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/bgiZj.png);
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		// align-items: center;     /* 垂直居中 */
	}

	.detail {
		margin: 20rpx 40rpx;
		border-radius: 10rpx;
		padding: 10rpx;
		margin-top: 30vh;
		background-image:
			url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/cardBgi.png");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		height: 20vh;
	}

	.text-detail {
		margin-top: 20rpx;
		margin-bottom: 10rpx;
		padding: 0px 10px;
		font-weight: 500;
		font-size: 26rpx;
		color: #FFFFFF;
	}

	.text-one {
		font-weight: 400;
		font-size: 26rpx;
		color: #FF31C2;
		margin-bottom: 10rpx;

	}

	.detail-btn {
		text-align: center;
		color: #F9D395;
		height: 60rpx;
		line-height: 60rpx;
		margin-right: 20rpx;
		font-size: 13px;
		background-color: #901710;
		padding: 3px;
		border-radius: 5px;

	}

	.center-image {
		height: 280rpx;
		object-fit: contain;
		/* 保持图片的宽高比，确保不会被拉伸或裁切 */
	}

	::v-deep .detail-btn span {
		background-color: #8E1813;
		padding: 4rpx;
		border-radius: 8rpx;
		font-weight: 400;
		font-size: 26rpx;
	}

	.hint {
		font-weight: 500;
		font-size: 24rpx;
		color: #FF31C2;
		text-align: center;
	}

	.custom-style {
		height: 74rpx;
	}
</style>