新增支付详情

components/vear-carousel/vear-carousel.vue

@@ -1,5 +1,5 @@
 <template>
-	<swiper class="image-container" previous-margin="45rpx" next-margin="45rpx" circular :autoplay="false" @change="swiperChange">
+	<swiper class="image-container" previous-margin="100rpx" next-margin="100rpx" circular :autoplay="false" @change="swiperChange">
 		<swiper-item :class="currentIndex == index ? 'swiper-item' : 'swiper-item-side'" v-for="(item, index) in imgList" :key="item[urlKey]">
 			<image @click="clickImg(item)" :class="currentIndex == index ? 'item-img' : 'item-img-side'" :src="item[urlKey]" lazy-load :style="dontFirstAnimation ? 'animation: none;' : ''" mode="aspectFill"></image>
 		</swiper-item>
@@ -42,33 +42,32 @@
 <style scoped>
 	.image-container {
 		width: 750rpx;
-		height: 350rpx;
+		height: 480rpx;
 	}
 
 	.item-img {
-		width: 630rpx;
-		height: 300rpx;
-		border-radius: 14rpx;
+		width: 500rpx;
+		height: 480rpx;
 		animation: to-big .3s;
 	}
 
 	.swiper-item {
-		width: 630rpx;
+		width: 500rpx;
 		height: 300rpx;
 		display: flex;
 		justify-content: center;
 		align-items: center;
 	}
+	
 	.item-img-side {
-		width: 630rpx;
-		height: 260rpx;
-		border-radius: 14rpx;
+		width: 500rpx;
+		height: 400rpx;
 		animation: to-mini .3s;
 	}
 
 	.swiper-item-side {
-		width: 630rpx;
-		height: 260rpx;
+		width: 500rpx;
+		height: 400rpx;
 		display: flex;
 		justify-content: center;
 		align-items: center;
@@ -76,19 +75,19 @@
 	@keyframes to-mini
 	{
 		from {
-			height: 300rpx;
+			height: 480rpx;
 		}
 		to {
-			height: 260rpx;
+			height: 400rpx;
 		}
 	}
 	@keyframes to-big
 	{
 		from {
-			height: 260rpx;
+			height: 400rpx;
 		}
 		to {
-			height: 300rpx;
+			height: 480rpx;
 		}
 	}
 </style>

pages.json

@@ -31,6 +31,8 @@
 		"path": "pages/prize/coupon"
 	}, {
 		"path": "pages/prize/detail"
+	}, {
+		"path": "pages/coupon/index"
 	}],
 	"tabBar": {
 		"custom": true,

pages/coupon/index.vue

@@ -0,0 +1,80 @@
+<template>
+	<view>
+		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="选择优惠券"></u-navbar>
+		<view class="coupon-title">可用代金券：1</view>
+		<view class="coupon-list">
+			<view class="flex coupon-list-item">
+				<view class="flex coupon-list-item-info">
+					<image src="../../static/logo.png" mode=""></image>
+					<view class="flex content">
+						<view class="txt">xx盲票代金券</view>
+						<view class="txt">使用期限：2022.03.02-2022.04.01</view>
+						<view class="txt">适用范围：指定盲票</view>
+					</view>
+					<view class="money">
+						<view class=""><text>￥</text>10,00</view>
+					</view>
+				</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>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				checked: false
+			};
+		},
+		methods:{
+			changeChecked(e){
+				console.log(e);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.coupon {
+		&-title {
+			position: fixed;
+			width: 100%;
+			padding: 24rpx 32rpx;
+			background-color: #FFFFFF;
+		}
+
+		&-list {
+			margin-top: 100rpx;
+			padding: 0 20rpx;
+
+			&-item {
+				justify-content: space-between;
+				padding: 40rpx;
+				background-color: #FFFFFF;
+				
+				&-info{
+					flex: 1;
+					
+					image{
+						width: 84rpx;
+						height: 132rpx;
+					}
+					
+					.content{
+						height: 132rpx;
+						flex-direction: column;
+						align-items: flex-start;
+						justify-content: space-between;
+					}
+				}
+			}
+		}
+	}
+</style>

pages/index/index.vue

@@ -26,11 +26,60 @@
 				</view>
 			</view>
 			<view class="box-ticket">
-				<carousel :img-list="imgList" url-key="url" @selected="selectedBanner"/>
+				<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>
 
@@ -58,12 +107,37 @@
 				}, {
 					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'
+				})
 			}
 		}
 	}
@@ -111,7 +185,8 @@
 					}
 				}
 			}
-			&-tip{
+
+			&-tip {
 				display: flex;
 				flex-direction: column;
 				align-items: flex-end;
@@ -119,9 +194,156 @@
 				color: #FFFFFF;
 			}
 		}
-		
-		&-ticket{
-			padding: 200rpx 0;
+
+		&-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>