新增兑换详情

components/vear-carousel/vear-carousel.vue

@@ -0,0 +1,94 @@
+<template>
+	<swiper class="image-container" previous-margin="45rpx" next-margin="45rpx" 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>
+	</swiper>
+</template>
+<script>
+	export default {
+		props: {
+			imgList: {
+				type: Array,
+				default() {
+					return []
+				}
+			},
+			urlKey: {
+				type: String,
+				default() {
+					return ''
+				}
+			},
+		},
+		data() {
+			return {
+				currentIndex: 0,
+				dontFirstAnimation: true
+			}
+		},
+		methods: {
+			swiperChange(e) {
+				console.log(e);
+				this.dontFirstAnimation = false
+				this.currentIndex = e.detail.current
+			},
+			clickImg(item) {
+				this.$emit('selected', item, this.currentIndex)
+			}
+		}
+	}
+</script>
+<style scoped>
+	.image-container {
+		width: 750rpx;
+		height: 350rpx;
+	}
+
+	.item-img {
+		width: 630rpx;
+		height: 300rpx;
+		border-radius: 14rpx;
+		animation: to-big .3s;
+	}
+
+	.swiper-item {
+		width: 630rpx;
+		height: 300rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	.item-img-side {
+		width: 630rpx;
+		height: 260rpx;
+		border-radius: 14rpx;
+		animation: to-mini .3s;
+	}
+
+	.swiper-item-side {
+		width: 630rpx;
+		height: 260rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	@keyframes to-mini
+	{
+		from {
+			height: 300rpx;
+		}
+		to {
+			height: 260rpx;
+		}
+	}
+	@keyframes to-big
+	{
+		from {
+			height: 260rpx;
+		}
+		to {
+			height: 300rpx;
+		}
+	}
+</style>

pages.json

@@ -19,7 +19,6 @@
 		"path": "pages/order/settlement"
 	}, {
 		"path": "pages/login/index"
-
 	}, {
 		"path": "pages/about/index"
 	}, {

pages/goods/detail.vue

@@ -3,24 +3,73 @@
 		<u-navbar title="兑换详情" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff" />
 		<view class="detail">
 			<view class="detail-top">
-				<u-swiper :list="picUrlArr" height="320" :indicator="true" :circular="true"></u-swiper>
+				<u-swiper :list="picUrlArr" height="348" :indicator="true" :circular="true"></u-swiper>
 			</view>
-			<view class="detail-sku">
-				<view class="detail-sku-title">参数</view>
+			<view class="detail-title">
+				<view class="txt">Apple iPhone 13 (A2634) 128GB 星光色 支持移动联通电信5G 双卡双待手机</view>
+				<view class="coin">
+					<image src="../../static/logo.png" mode=""></image>
+					<view>x 6800</view>
+				</view>
 			</view>
+			<view class="detail-goods">商品详情</view>
 		</view>
 		<view class="footer-fixed">
 			<view class="flex btn">
-				<view class="btn-left" @click="toCart">
-					<u-icon name="shopping-cart" color="#808080" size="20"></u-icon>
-					<view>购物车</view>
+				<button type="default" @click="exChange">立即兑换</button>
+			</view>
+		</view>
+
+		<!-- 兑换选择 -->
+		<u-popup :show="choiceShow" 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-coin">
+							<image src="../../static/logo.png" mode=""></image>
+							<view>x 6800</view>
+						</view>
+						<view class="info-stock">库存：234</view>
+					</view>
+				</view>
+				<view class="sku">
+					<view class="sku-title">颜色</view>
+					<view class="flex sku-list">
+						<view class="sku-list-item">红色</view>
+						<view class="sku-list-item">黑色</view>
+					</view>
+				</view>
+				<view class="sku">
+					<view class="sku-title">颜色</view>
+					<view class="flex sku-list">
+						<view class="sku-list-item">红色</view>
+						<view class="sku-list-item">黑色</view>
+					</view>
+				</view>
+				<view class="flex quantity">
+					<view class="quantity-title">兑换数量</view>
+					<view class="quantity-title">
+						<u-number-box v-model="value" :min="1" @change="valChange"></u-number-box>
+					</view>
 				</view>
-				<view class="btn-right">
-					<text @click="addCart">加入购物车</text>
-					<text @click="toSettlement">立即购票</text>
+				<view class="flex btn">
+					<view class="flex btn-left">
+						<view class="title">应付：</view>
+						<view class="flex coin">
+							<image src="../../static/logo.png" mode=""></image>
+							<view>x 6800</view>
+						</view>
+					</view>
+					<view class="btn-right">
+						<view class="confirm">立即兑换</view>
+					</view>
 				</view>
 			</view>
-		</view>
+		</u-popup>
 	</view>
 </template>
 
@@ -38,6 +87,11 @@
 				],
 				info: {},
 				prizeList: [],
+
+				choiceShow: false,
+
+				value: 1,
+
 			};
 		},
 		onLoad(opthios) {
@@ -67,180 +121,187 @@
 				})
 			},
 
-			addCart(id) {
-				let data = {
-					boxId: this.info.boxId,
-					orderNum: 1
-				}
-				$http.post(`/api/v1/mp/channel/mall/cart/add`, data).then(res => {
-					if (res.code == 0) {
-						uni.$u.toast('加入购物车成功');
-					}
-				})
+			exChange() {
+				this.choiceShow = true
 			},
 
-			toCart() {
-				uni.switchTab({
-					url: "/pages/index/cart"
-				})
+			close() {
+				this.choiceShow = false
 			},
 
-			toSettlement() {
-				uni.navigateTo({
-					url: `/pages/order/settlement?boxId=${ this.info.boxId }`
-				})
+			valChange(e) {
+				console.log(e);
 			}
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-	
+
 </style>
 <style lang="scss" scoped>
 	.detail {
 		padding-bottom: 100rpx;
 
 		&-top {
-			margin-bottom: 20rpx;
+			height: 696rpx;
+			background-color: #FFFFFF;
 		}
 
-		&-info {
-			justify-content: space-between;
-			box-sizing: border-box;
-			padding: 24rpx 16rpx;
-			background-color: #fff;
-			margin: 10rpx 10rpx 20rpx;
-			border-radius: 10rpx;
+		&-title {
+			padding: 24rpx;
+			background-color: #FFFFFF;
+			margin-bottom: 10rpx;
+
+			.txt {
+				font-size: 32rpx;
+				line-height: 44rpx;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				display: -webkit-box;
+				-webkit-box-orient: vertical;
+				-webkit-line-clamp: 2;
+				margin-bottom: 24rpx;
+				font-weight: bold;
+			}
 
-			&__left {
+			.coin {
 				display: flex;
-				flex-direction: column;
-				justify-content: space-between;
+				align-items: center;
+				font-size: 32rpx;
+				line-height: 44rpx;
+				color: rgba(235, 112, 9, 100);
+			}
 
-				text {
-					font-size: 24rpx;
-					line-height: 24rpx;
-					display: inline-block;
-				}
+			image {
+				width: 42rpx;
+				height: 42rpx;
+				margin-right: 20rpx;
+			}
+		}
 
-				.title {
-					color: rgba(16, 16, 16, 100);
-					font-size: 32rpx;
-					line-height: 32rpx;
-					font-weight: bold;
-					margin-bottom: 40rpx;
-				}
+		&-goods {
+			height: 88rpx;
+			text-align: center;
+			line-height: 88rpx;
+			font-weight: bold;
+			background-color: #FFFFFF;
+		}
+	}
 
-				.num {
-					width: 220rpx;
-					height: 34rpx;
-					color: $uni-text-color;
-					text-align: center;
-					line-height: 34rpx;
-					border: 1px solid $uni-bg-color;
-					border-radius: 6rpx;
+	.choiceShow-wrap {
+		min-height: 400rpx;
+		padding: 80rpx 20rpx 60rpx;
+
+		.goods {
+			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;
 				}
 			}
 
-			&__right {
+			.info {
+				flex: 1;
 				display: flex;
 				flex-direction: column;
-				align-items: flex-end;
 				justify-content: space-between;
+				padding-left: 26rpx;
 
-				text {
-					color: rgba(157, 157, 157, 100);
-					font-size: 14px;
-				}
-
-				.money {
-					font-size: 40rpx;
-					font-weight: bold;
-					line-height: 40rpx;
+				&-title {
+					font-size: 32rpx;
+					line-height: 44rpx;
 					font-weight: bold;
-					color: $uni-text-color;
-					margin-bottom: 40rpx;
 				}
-			}
-		}
-
-		&-sku {
-			background-color: #fff;
-			border-radius: 10rpx;
-			margin: 10rpx 10rpx 20rpx;
 
-			&-title {
-				padding: 24rpx 16rpx 12rpx;
-			}
+				&-coin {
+					display: flex;
+					align-items: center;
+					font-size: 32rpx;
+					line-height: 44rpx;
+					color: rgba(235, 112, 9, 100);
+					font-weight: bold;
 
-			&-item {
-				padding-bottom: 10rpx;
+					image {
+						width: 42rpx;
+						height: 42rpx;
+						margin-right: 20rpx;
+					}
+				}
 
-				view {
-					padding-left: 50rpx;
-					line-height: 50rpx;
+				&-stock {
+					line-height: 44rpx;
 				}
 			}
 		}
 
-		&-goods {
-			margin: 10rpx 10rpx 20rpx;
+		.sku {
+			margin-bottom: 30rpx;
 
 			&-title {
-				margin-bottom: 20rpx;
+				line-height: 42rpx;
 			}
 
 			&-list {
-				background-color: #FFFFFF;
+				justify-content: flex-start;
 
 				&-item {
-					position: relative;
-					margin: 16rpx 0;
-					border-bottom: 1px solid rgba(236, 236, 236, 100);
+					line-height: 44rpx;
+					padding: 0 20rpx;
+					border: 1px solid rgba(187, 187, 187, 100);
+					margin-left: 36rpx;
+				}
 
-					&__value {
-						display: flex;
-					}
+				&-item:first-child {
+					margin-left: 0;
+				}
+			}
+		}
 
-					.image-wrap {
-						width: 250rpx;
-						height: 250rpx;
-						margin-right: 30rpx;
+		.quantity {
+			justify-content: space-between;
+			margin-bottom: 40rpx;
+		}
 
-						image {
-							width: 180rpx;
-							height: 120rpx;
-						}
-					}
+		.btn {
+			justify-content: space-between;
 
-					.name {
-						position: absolute;
-						line-height: 28rpx;
-						padding: 6rpx 20rpx;
-						background-color: $uni-bg-color;
-					}
+			&-left {
+				.coin {
+					display: flex;
+					align-items: center;
+					font-size: 32rpx;
+					line-height: 44rpx;
+					color: rgba(235, 112, 9, 100);
+					font-weight: bold;
+					margin-left: 20rpx;
 
-					.info {
-						display: flex;
-						flex-direction: column;
-						font-size: 24rpx;
-
-						text {
-							margin-bottom: 10rpx;
-						}
-
-						text:first-child {
-							font-size: 28rpx;
-							margin-top: 24rpx;
-							margin-bottom: 30rpx;
-							font-weight: bold;
-						}
+					image {
+						width: 42rpx;
+						height: 42rpx;
+						margin-right: 20rpx;
 					}
 				}
+			}
 
-				&-item:last-child {
-					border: none;
+			&-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;
 				}
 			}
 		}
@@ -251,52 +312,25 @@
 		bottom: var(--window-bottom);
 		left: 0;
 		right: 0;
-		// min-height: 120rpx;
 		z-index: 11;
 		box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
 		background: #fff;
-		// margin-bottom: 40rpx;
-
 		// 设置ios刘海屏底部横线安全区域
 		padding-bottom: constant(safe-area-inset-bottom);
 		padding-bottom: env(safe-area-inset-bottom);
 
 		.btn {
-			justify-content: space-between;
-			padding: 10rpx 40rpx;
-
-			&-left {
-				display: flex;
-				line-height: 28rpx;
-				flex-direction: column;
-				align-items: center;
-				justify-content: center;
-				color: #808080;
-			}
-
-			&-right {
-				display: flex;
-				align-items: center;
-				justify-content: flex-end;
-
-				text {
-					width: 190rpx;
-					height: 60rpx;
-					line-height: 60rpx;
-					border-radius: 8rpx;
-					text-align: center;
-					margin-left: 40rpx;
-				}
-
-				text:first-child {
-					background-color: rgba(236, 153, 84, 100);
-					color: rgba(255, 255, 255, 100);
-				}
-
-				text:last-child {
-					background-color: rgba(235, 112, 9, 100);
-					color: rgba(255, 255, 255, 100);
-				}
+			padding: 20rpx 40rpx;
+
+			/deep/ button {
+				width: 100%;
+				line-height: 60rpx;
+				font-size: 28rpx;
+				height: 60rpx;
+				color: #fff;
+				background-color: $uni-bg-color;
+				border: none;
+				border-radius: 100rpx;
 			}
 		}
 	}

pages/index/index.vue

@@ -1,5 +1,35 @@
 <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>
 		<custom-tab-bar :activeValue="'index'" />
 	</view>
 </template>
@@ -8,22 +38,90 @@
 	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
+				}, ]
 			};
+		},
+		methods: {
+			selectedBanner(item, index) {
+				console.log('馃', item, 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{
+			padding: 200rpx 0;
+		}
+	}
 </style>