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

<template>
  <view class="intro-page common">
    <view class="top-class"></view>
    <view class="title">
      <view class="logo-container">
        <image class="logo-text" @click="openDetail" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/common/logo.png"  />
      </view>
      <view class="title-1">
        <view class="title-image"></view>
      </view>
    </view>
    <view class="head">
      <image class="logo-rules" @click="openDetail" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/common/rules.png"  />
    </view>
    <view class="head-ttile">
      <view class="head-ttile-img">
        <image class="ttile-img" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/common/bgi_3.png" mode="heightFix"/>
      </view>
      <view class="head-ttile-text">
        正宗海南·醇香浓郁
      </view>
    </view>


		<view class="content-index">
      <view class="title-1">
        <view class="content_imgView">
          <image style="height: 500rpx" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/commodity.png"
                 mode="heightFix" />
        </view>
      </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="#293993" ></u--input>
						</u-col>
						<u-col span="3">
							<u-button text="开始抽奖" class="custom-style" color="#293993" @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_common.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/xhc/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_xhc.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;
		height: 20vh;
    background: #FDE2B1;
    border: 4px solid #FB911B;
	}

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

	.text-one {
		font-weight: 400;
		font-size: 26rpx;
		color: #293993 ;
		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: #F94C28 ;
		text-align: center;
	}

	.custom-style {
		height: 74rpx;
	}
  .content {
    margin-top: 16vh;
  }
  ::v-deep .u-border{
    border-color: #293993 !important;
  }
</style>