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

<template>
	<view class="common">
		<view class="body">
			<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="content">

				<view class="cardTop">

				</view>
				<view class="content_text">
					<view class="h1">
						.活动规则
					</view>
					<view class="text_1">
						凡购买我司产品，扫描外包装背后二维码，即有机会参与优惠活动，赢取优惠或实物礼品。
					</view>
					<view class="h1">
						.扫码有效时间
					</view>
					<view class="text_1">
						本产品生产日期开始60天内可以扫码参与优惠活动。
					</view>
					<view class="h1">
						.扫码次数
					</view>
					<view class="text_1">
						每个微信号，单日扫码活动以5次为限。
					</view>
					<view class="h1">
						.活动参与方式
					</view>
					<view class="text_1">
						1.通过手机扫描外包装背面二维码，进入优惠界面。
					</view>
					<view class="text_1">
						2.撕开包装，输入内侧验证码参与优惠活动。
					</view>
					<view class="h1">
						.活动奖品
					</view>
					<u-row   class="row-class" customStyle="margin-bottom: 5px" v-for="(item, index) in planDetails">
						<u-col span="4" textAlign ="left" >
							<view class=" item-text">{{item.prize_name}}</view>
						</u-col>
						<u-col span="8">
							<view class="item-text-1">{{item.prize_desc}}</view>
						</u-col>
					</u-row>

				</view>
				<view class="return_view">
					<view class="return-button" @click="goBack">返回</view>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	
	import {
		getRule
	} from '@/api/scan'
	export default {

		data() {
			return {
				scanCode: '',
				planDetails: []
			}
		},
		onLoad() {
			this.scanCode = uni.getStorageSync('scanCode');
			this.initRuleData();

		},
		methods: {
			openDetail(){
				uni.navigateTo({
					url: '/pages/cjx/index/rules'
				});
			},
			goBack() {
				uni.navigateBack();
			},
			initRuleData() {
				getRule(this.scanCode).then(res => {
					console.log(res)
					if (res.code == 0) {
						this.planDetails = res.data.planDetails;
					}
				})
			}

		}
	}
</script>

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

	.cardTop{
		background-image:
			url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/hdgz.png");
	}
	.row-class {
		height: 80rpx;
	}

	.logo-rules {
		height: 124rpx;
		width: 80rpx;
		margin-left: 110rpx;
	}

	.logo-img {
		background-size: cover;
		/* 确保背景图片自适应填充整个容器 */
		background-position: center;
		/* 背景图片居中显示 */
		background-repeat: no-repeat;
		/* 防止背景图重复 */
		height: 100rpx;
		width: 62%;
		margin-right: 80rpx;
	}

	.commodity-img {
		background-size: cover;
		/* 确保背景图片自适应填充整个容器 */
		background-position: center;
		/* 背景图片居中显示 */
		background-repeat: no-repeat;
		/* 防止背景图重复 */
		height: 72rpx;
		width: 100%;
	}
	.item-text{
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
	}
	.item-text-1{
		font-weight: 500;
		font-size: 30rpx;
		color: #D9B96D;
	}
	.text {
		height: 10vh;
		text-align: center;
		line-height: 13vh;
		margin-bottom: 10rpx;
	}

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

	.content {
		height: 60vh;
		border-radius: 10rpx;
		margin: 0rpx 40rpx;
		padding: 10rpx 24rpx;
		overflow: auto;
		align-items: center;
		justify-content: center;
		background-image:
			url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/cardBgi.png");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;

	}

	.text-1 {
		text-align: center;
		font-size: 24rpx;
		font-weight: 600;
		color: white;
		background-color: #9A1712;
		width: 160rpx;
		border-radius: 4rpx;
		height: 40rpx;
		line-height: 40rpx;
	}

	.text-2 {
		text-align: center;
		font-size: 24rpx;
		font-weight: 600;
		color: #F9D395;
		background-color: #9A1712;
		width: 120rpx;
		border-radius: 4rpx;
		height: 40rpx;
		line-height: 40rpx;
		margin-left: 80rpx;
	}

	.cards {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 30rpx;
		width: 100%;
	}

	.card {
		width: 100%;
		height: 250rpx;
		position: relative;
		background: none;
		border-radius: 16rpx;
		margin: 0;
		perspective: 1000px;
	}

	.card-inner {
		position: relative;
		width: 100%;
		height: 100%;
		transition: transform 0.8s cubic-bezier(0.5, 1.5, 0.5, 1);
		transform-style: preserve-3d;
	}

	.card.flipping .card-inner {
		transform: rotateY(180deg);
	}

	.card.flipped .card-inner {
		transform: rotateY(180deg);
	}

	.card-front,
	.card-back {
		position: absolute;
		width: 100%;
		height: 100%;
		backface-visibility: hidden;
	}

	.card-back {
		transform: rotateY(180deg);
	}

	.card-back-text {
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		text-align: center;
		color: #9A1712;
		font-weight: bold;
		font-size: 28rpx;
		transform: translateY(-50%);
		z-index: 2;
		pointer-events: none;
	}


	.card-img {
		width: 100%;
		height: 100%;
		display: block;
	}


	::v-deep .u-popup__content {
		height: 720rpx;
		width: 600rpx;
		background-color: rgba(0, 0, 0, 0) !important;
		background-image:
			url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/bgiPopup.png");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	::v-deep .u-popup__content__close--top-right {
		top: 720rpx !important;
		right: 288rpx !important;
	}

	.winImgClss {
		height: 60rpx;
		width: 320rpx;
	}

	.popup-view {
		text-align: center;
		margin-top: 100rpx;
	}

	.popup-content {
		margin: 15px 54px;
		overflow: auto;
	}

	.popup-text {
		font-weight: 400;
		font-size: 20rpx;
		color: #9B0000;
	}

	.prize {
		height: 130rpx;
		width: 130rpx;
	}

	::v-deep .u-form-item__body {
		padding: 8rpx;
	}

	::v-deep uni-view.u-form-item__body__left {
		background: #AD7F55;
		border-radius: 5px 0px 0px 5px;
		border: 2px solid #63462B;
		border-right: none;
	}

	::v-deep .u-form-item__body__right {
		background-color: #fff;
		border-radius: 0px 5px 5px 0px;
		border: 2px solid #63462B;
	}

	::v-deep uni-text.u-form-item__body__left__content__label {
		color: #fff !important;
		padding-left: 4px;
		letter-spacing: 2px;
	}

	.popup-flex {
		display: flex;
		flex-direction: column;
		height: 100%;
		/* 或具体高度如340px，确保撑满弹窗 */
		min-width: 600rpx;
	}

	.popup-content-scroll {
		flex: 1;
	}

	.popup-footer {
		flex-shrink: 0;
		padding: 0rpx 0 60rpx 0px;
		text-align: center;
		background: transparent;
		/* 可选，确保无背景遮挡 */
	}

	.save-button {
		width: 90rpx;
		margin: 0 auto;
		background: #b22222;
		color: #F9D395;
		border-radius: 12rpx;
		padding: 18rpx 0;
		font-size: 24rpx;
		font-weight: bold;
		height: 16rpx;
		line-height: 16rpx;
		letter-spacing: 4rpx;
	}

	.unWin {
		width: 130rpx !important;
	}

	.productImg {
		width: 400rpx;
	}

	::v-deep .u-swiper {
		background-color: rgba(0, 0, 0, 0) !important;
		padding: 0px 20rpx !important;
		width: 90%;
	}

	::v-deep .u-col-4 {

	}

	::v-deep .right-col .u-col-4 {
		display: flex !important;
		justify-content: flex-end !important;
		/* 水平居中 */
		align-items: center !important;
		/* 垂直居中 */
	}

	.card-img-f {
		height: 100rpx;
		width: 100rpx;
	}

	.card-text {
		font-size: 26rpx;
	}

	.select-tag {
		position: absolute;
		right: 0px;

		font-weight: 400;
		font-size: 20rpx;
		color: #FFFFFF;
		width: 40px;
		text-align: center;
		background-color: #11BC64;
		height: 15px;
		border-radius: 3px;
		line-height: 15px;
		z-index: 5;
	}

	.h1 {
		font-weight: bold;
		font-size: 28rpx;
		color: #E22ADD;
		margin-bottom: 10rpx;
	}

	.text_1 {
		font-weight: 400;
		font-size: 12px;
		color: #FFFFFF;
		margin-bottom: 10rpx;
	}
</style>