mp-ui-user/pages/index/index.vue

<template>
	<view>
		<!-- 非H5撑高元素 -->
		<view class="status_bar"></view>
		<view class="box">
			<view class="box-top">
				<view class="box-top-action">
					<view class="box-top-action-item">
						<view class="flex box-top-action-item-cir">
							<u-icon name="scan" color="#fff" size="45"></u-icon>
						</view>
						<view class="box-top-action-item-txt">扫一扫</view>
					</view>
					<view class="box-top-action-item">
						<view class="flex box-top-action-item-cir">
							<u-icon name="gift" color="#fff" size="45"></u-icon>
						</view>
						<view class="box-top-action-item-txt">奖品库</view>
					</view>
				</view>
				<view class="box-top-tip">
					<view class="flex box-top-tip-txt">
						<u-icon name="file-text" color="#fff" size="20"></u-icon>
						<text>规则说明</text>
					</view>
				</view>
			</view>
			<view class="box-ticket">
				<carousel :img-list="imgList" url-key="url" @selected="selectedBanner" />
			</view>
			<view class="box-ticket-tip">100%保底必中</view>
			<view class="box-start flex">
				<view class="flex box-start-action" @click="exchange">
					<text>立即</text>
					<text>开刮</text>
				</view>
				<view class="box-start-all">所有盲票</view>
			</view>
		</view>
		<custom-tab-bar :activeValue="'index'" />

		<u-popup :show="payShow" mode="bottom" @close="close" :closeable="true">
			<view class="choiceShow-wrap">
				<view class="flex goods">
					<view class="flex image-wrap">
						<image src="../../static/logo.png" mode="aspectFill"></image>
					</view>
					<view class="info">
						<view class="info-title">Apple iPhone 13 (A2634) 128GB 星光色 支持移动联通电信5G 双卡双待手机</view>
						<view class="info-stock">￥10.00</view>
					</view>
				</view>
				<view class="flex coupon" @click="toCoupon">
					<view class="flex coupon-left">
						<u-icon name="coupon" size="26" color="#333"></u-icon>
						<view class="txt">代金券</view>
					</view>
					<view class="flex coupon-right">
						<view class="txt">选择代金券</view>
						<u-icon name="arrow-right" size="16" color="#333"></u-icon>
					</view>
				</view>
				<view class="flex agreement">
					<view class="txt">同意<text>《盲票购买须知》</text></view>
					<view class="checked">
						<u-checkbox-group>
							<u-checkbox :value="checked" :checked="checked" shape="circle" activeColor="#E96737"
								@change="changeChecked"></u-checkbox>
						</u-checkbox-group>
					</view>
				</view>
				<view class="flex btn">
					<view class="flex btn-left">
						<view class="title">应付：</view>
						<view class="flex coin">￥10.00</view>
					</view>
					<view class="btn-right">
						<view class="confirm">立即支付</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import env from '../../config/env.js'
	import $http from '@/utils/request.js'
	import CustomTabBar from '../../components/custom-tab-bar/custom-tab-bar.vue'
	import carousel from '@/components/vear-carousel/vear-carousel'
	export default {
		components: {
			CustomTabBar,
			carousel
		},
		data() {
			return {
				imgList: [{
					url: 'https://z3.ax1x.com/2021/03/05/6ehghR.jpg',
					id: 1
				}, {
					url: 'https://z3.ax1x.com/2021/03/05/6ehnfI.jpg',
					id: 2
				}, {
					url: 'https://z3.ax1x.com/2021/03/05/6ehfc6.jpg',
					id: 3
				}, {
					url: 'https://z3.ax1x.com/2021/03/05/6efCqg.jpg',
					id: 4
				}, ],
				id: '',
				value: 1,
				payShow: false,
				checked: false
			};
		},
		onLoad(opthios) {
			this.id = opthios.id
		},
		methods: {
			selectedBanner(item, index) {
				console.log('馃', item, index)
			},

			close() {
				this.payShow = false
			},

			exchange() {
				this.payShow = true
			},

			changeChecked(e) {
				console.log(e);
			},

			toCoupon() {
				uni.navigateTo({
					url: '/pages/coupon/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.status_bar {
		width: 100%;
		height: var(--status-bar-height);
	}

	/deep/ .u-tabbar__placeholder {
		display: none;
	}
</style>

<style lang="scss" scoped>
	.box {
		width: 100%;
		height: calc(100vh - 50px);
		background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.zhimg.com%2F50%2Fv2-a6f5c8b5b66fe87e4e79c1fc82a61a36_hd.jpg&refer=http%3A%2F%2Fpic3.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649658373&t=f216ee4825d5b36e62aa3a490516bfb1) center center;

		&-top {
			display: flex;
			justify-content: space-between;
			padding: 80rpx 40rpx 0;

			&-action {
				display: flex;

				&-item {
					margin-right: 76rpx;

					&-cir {
						width: 104rpx;
						height: 104rpx;
						background-color: #FCB824;
						border-radius: 50%;
						margin-bottom: 14rpx;
					}

					&-txt {
						text-align: center;
						color: #FFFFFF;
					}
				}
			}

			&-tip {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				justify-content: flex-end;
				color: #FFFFFF;
			}
		}

		&-ticket {
			margin: 200rpx 0 0;
			height: 480rpx;
		}

		&-ticket-tip {
			margin-top: 20rpx;
			line-height: 40rpx;
			text-align: center;
			font-size: 24rpx;
			color: #F44200;
		}

		&-start {
			position: relative;
			margin-top: 60rpx;

			&-action {
				flex-direction: column;
				width: 226rpx;
				height: 226rpx;
				border-radius: 50%;
				background-color: #EB7009;
				box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);

				text {
					display: inline-block;
					color: #FFFFFF;
					line-height: 50rpx;
				}
			}

			&-all {
				position: absolute;
				right: 50rpx;
				text-align: center;
				width: 156rpx;
				height: 156rpx;
				line-height: 156rpx;
				border-radius: 50%;
				background-color: #FFFFFF;
			}
		}
	}

	.choiceShow-wrap {
		min-height: 400rpx;
		padding: 80rpx 0 60rpx;

		.goods {
			padding: 0 20rpx;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.image-wrap {
				width: 220rpx;
				height: 220rpx;
				border: 1px solid rgba(236, 236, 236, 100);
				border-radius: 10rpx;

				image {
					width: 174rpx;
					height: 174rpx;
				}
			}

			.info {
				flex: 1;
				display: flex;
				height: 220rpx;
				flex-direction: column;
				justify-content: space-between;
				padding-left: 26rpx;

				&-title {
					font-size: 32rpx;
					line-height: 44rpx;
					font-weight: bold;
				}

				&-coin {
					display: flex;
					align-items: center;
					font-size: 32rpx;
					line-height: 44rpx;
					color: rgba(235, 112, 9, 100);
					font-weight: bold;

					image {
						width: 42rpx;
						height: 42rpx;
						margin-right: 20rpx;
					}
				}

				&-stock {
					line-height: 44rpx;
				}
			}
		}

		.coupon {
			justify-content: space-between;
			padding: 30rpx 40rpx;
			border-top: 1px solid rgba(187, 187, 187, 100);
			border-bottom: 1px solid rgba(187, 187, 187, 100);

			.txt {
				margin: 0 24rpx;
			}
		}

		.agreement {
			justify-content: space-between;
			padding: 50rpx 40rpx;
			border-bottom: 1px solid rgba(187, 187, 187, 100);

			.txt text {
				color: #007aff;
			}
		}

		.btn {
			justify-content: space-between;
			padding: 20rpx 20rpx;

			&-left {
				.coin {
					display: flex;
					align-items: center;
					font-size: 32rpx;
					line-height: 44rpx;
					color: rgba(235, 112, 9, 100);
					margin-left: 20rpx;
				}
			}

			&-right {
				.confirm {
					width: 250rpx;
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 8px;
					background-color: rgba(235, 112, 9, 100);
					color: rgba(255, 255, 255, 100);
					font-size: 28rpx;
					text-align: center;
				}
			}
		}
	}
</style>