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

<template>
	<view class="common">
		<view class="body">
			<view class="top-class"></view>
			<view class="title">
				活动规则
			</view>
      <view class="head">

      </view>


			<view class="content">

				<view class="content_text">
					<view class="h1">
						.活动规则
					</view>
					<view class="text_1">
						凡购买我司产品，扫描外包装背后二维码，即有机会参与优惠活动，赢取优惠或实物礼品。
					</view>
					<view class="h1">
						.扫码有效时间
					</view>
					<view class="text_1">
						本产品生产日期开始有效期内可以扫码参与优惠活动。
					</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="12" textAlign ="left" >
							<view class=" item-text">{{item.prize_name}}</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: {
			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_qilang.css');

	.row-class {
		height: 80rpx;
	}

	.item-text{
		font-weight: 500;
		font-size: 30rpx;
		color:  #EC6B25;
	}


	.content {
		height: 65vh;
		padding: 10rpx 24rpx;
		overflow: auto;
		align-items: center;
		justify-content: center;
    border-radius: 48px;
    background: #FDE2B1;
    border: 6px solid #FB911b;
    margin: 10vh 40rpx 0rpx;

	}



	::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;
	}


	::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;
		/* 可选，确保无背景遮挡 */
	}


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


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

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

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