Browse Source

新增开启盲票奖品移动页面

hwb0 3 năm trước cách đây
mục cha
commit
6bad6d5e81
4 tập tin đã thay đổi với 442 bổ sung75 xóa
  1. 0 69
      packageGoods/order/detail.vue
  2. 433 0
      packagePrize/rolling/index.vue
  3. 3 0
      pages.json
  4. 6 6
      pages/user/index.vue

+ 0 - 69
packageGoods/order/detail.vue

@@ -1,75 +1,6 @@
 <template>
 	<view class="detail">
 		<u-navbar title="订单详情" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff" />
-		<!-- <view class="detail">
-			<view class="detail-state">
-				<view class="detail-state-title">
-					<text>订单状态:</text>
-					<text>{{ status.desc }}</text>
-				</view>
-				<view class="detail-state-time" v-if="status.value == 2">
-					还剩 {{ autoConfirmTime || "--" }} 自动确认
-				</view>
-			</view>
-			<view class="detail-info">
-				<view class="detail-info-title">商品信息</view>
-				<view class="detail-info-content">
-					<view class="detail-info-content-goods">
-						<view class="flex detail-info-content-goods__detail" v-for="(item, index) in list" :key="index">
-							<view class="detail-info-content-goods__detail__left">
-								<view class="img">
-									<image class="img" :src="item.picUrl" mode="aspectFill">
-									</image>
-								</view>
-							</view>
-							<view class="detail-info-content-goods__detail__right">
-								<view class="ells title">{{ item.title }}</view>
-								<view class="sku" v-if="item.properties">规格:{{ item.properties }}</view>
-								<view class="num">数量:{{ item.goodsNum }}</view>
-							</view>
-						</view>
-					</view>
-
-					<view class="detail-info-content-money">
-						<view class="detail-info-content-money__item">
-							<text>运费</text>
-							<text>¥{{ $numberFormat(info.freightAmt) }}</text>
-						</view>
-					</view>
-
-					<view class="detail-info-content-toatl">
-						<text v-if="status.value == 0">应付:</text>
-						<text v-else>实付:</text>
-						<text>¥{{ $numberFormat(info.payAmt) }}</text>
-					</view>
-				</view>
-			</view>
-
-			<view class="detail-info">
-				<view class="detail-info-title">订单信息</view>
-				<view class="detail-info-content">
-					<view class="detail-info-content-desc">
-						<view>收货信息:</view>
-						<view>
-							{{ info.receiver }},{{ info.tel }},{{ info.province }}{{ info.city }}{{ info.area }}{{ info.address }}
-						</view>
-					</view>
-					<view class="detail-info-content-desc">
-						<view>订单编号:</view>
-						<view class="copy" @click="copyOrderId" v-if="status.value == 2 || status.value == 4">复制</view>
-						<view>{{ info.orderId }}</view>
-					</view>
-					<view class="detail-info-content-desc">
-						<view>下单时间:</view>
-						<view>{{ $parseTime(info.createdTime) }}</view>
-					</view>
-				</view>
-			</view>
-			<view class="freight" v-if="info.memo != ''">
-				<view style="width: 150rpx;display: inline-block;">留言:</view>
-				<view style="display: inline-block;width: 524rpx;vertical-align: top;">{{info.memo}}</view>
-			</view>
-		</view> -->
 		<!-- 订单状态 -->
 		<view class="status">
 			<image src="../../packageGoods/static/ordr/bg.png" mode="scaleToFill"></image>

+ 433 - 0
packagePrize/rolling/index.vue

@@ -0,0 +1,433 @@
+<template>
+	<view>
+		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="盲票开启"></u-navbar>
+		<view class="rolling">
+			<!-- 奖品滚动 -->
+			<view class="rolling-prize">
+				<view ref="rolling" class="rolling-prize-list" :animation="animationData">
+					<view class="rolling-prize-list-item flex" v-for="(item, index) in list" :key="index">
+						<view class="rolling-prize-list-item__items flex">
+							<view class="content flex" v-for="(items, indexs) in item" :key="indexs">
+								<image :src="items.url" mode="aspectFit"></image>
+								<view class="content-title ells">{{ items.title }}</view>
+								<view class="content-price">¥{{ $numberFormat(items.price) }}</view>
+							</view>
+						</view>
+					</view>
+				</view>
+				<view class="rolling-prize-list" :animation="animationData">
+					<view class="rolling-prize-list-item flex" v-for="(item, index) in list" :key="index">
+						<view class="rolling-prize-list-item__items flex">
+							<view class="content flex" v-for="(items, indexs) in item" :key="indexs">
+								<image :src="items.url" mode="aspectFit"></image>
+								<view class="content-title ells">{{ items.title }}</view>
+								<view class="content-price">¥{{ $numberFormat(items.price) }}</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			
+			<!-- 按钮 -->
+			<view class="rolling-btn flex">
+				<view class="rolling-btn-content flex" :class="{ 'btn-stop': btnIng }" @click="stop">
+					<image src="../../static/ticketBox/ticket_btn_center.png" mode="scaleToFill"></image>
+					<view class="rolling-btn-content-title">停止滚动</view>
+				</view>
+			</view>
+			
+			<!-- 倒计时 -->
+			<view class="rolling-time flex">
+				<view class="num">{{ num }}</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import env from '../../config/env.js'
+	import $http from '@/utils/request.js'
+	export default {
+		data() {
+			return {
+				animationData: {}, // 动画信息
+				num: 8, // 动画倒计时
+				num2: 0, // 动画持续时间
+				time: null, // 定时器
+				list: [
+					[
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示(Miceosoft)日版Xbox Seies S', price: 2999 },
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
+					],
+					[
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示(Miceosoft)日版Xbox Seies S', price: 2999 },
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
+					],
+					[
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示(Miceosoft)日版Xbox Seies S', price: 2999 },
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
+					],
+					[
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示(Miceosoft)日版Xbox Seies S', price: 2999 },
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
+					],
+					[
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示(Miceosoft)日版Xbox Seies S', price: 2999 },
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
+					],
+					[
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示(Miceosoft)日版Xbox Seies S', price: 2999 },
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
+					],
+					[
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示(Miceosoft)日版Xbox Seies S', price: 2999 },
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
+					],
+					[
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示(Miceosoft)日版Xbox Seies S', price: 2999 },
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
+					],
+					[
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示(Miceosoft)日版Xbox Seies S', price: 2999 },
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
+					],
+					[
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示(Miceosoft)日版Xbox Seies S', price: 2999 },
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
+					],
+					[
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示(Miceosoft)日版Xbox Seies S', price: 2999 },
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
+					],
+					[
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示(Miceosoft)日版Xbox Seies S', price: 2999 },
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
+					],
+					[
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示(Miceosoft)日版Xbox Seies S', price: 2999 },
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
+					],
+					[
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示(Miceosoft)日版Xbox Seies S', price: 2999 },
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
+					],
+					[
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示(Miceosoft)日版Xbox Seies S', price: 2999 },
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
+					],
+					[
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示(Miceosoft)日版Xbox Seies S', price: 2999 },
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
+						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
+					],
+				],
+				
+				btnIng: false,
+			}
+		},
+		
+		onLoad() {
+			// 创建动画实例
+			this.animation = uni.createAnimation()
+		},
+		
+		onUnload() {
+			// 移除动画
+			this.animationData = {}
+		},
+		
+		mounted() {
+			this.running()
+		},
+		
+		methods: {
+			// 动画开始
+			running() {
+				// #ifdef H5
+				// 获取滚动奖品列表长度
+				this.data = this.$refs.rolling.$el.clientWidth
+				// 调用 step() 来表示一组动画完成
+				this.animation.translateX(-this.data).step({
+					duration: 8000,
+					timingFunction: 'linear'
+				})
+				// export方法导出动画数据
+				this.animationData = this.animation.export()
+				// 倒计时
+				this.time = setInterval(() => {
+					// 开奖倒计时、页面显示
+					this.num--
+					// 记录动画执行时间,停止动画计算移动距离时使用
+					this.num2++
+					if (this.num == 0) {
+						clearInterval(this.time)
+					}
+				}, 1000)
+				// 不手动停止动画,自动停止
+				setTimeout(() => {
+					this.stop()
+				}, 8000);
+				// #endif
+			
+				// #ifdef MP-WEIXIN
+				// 元素详细信息
+				uni.createSelectorQuery().in(this).select(".rolling-prize-list").boundingClientRect(info => {
+					this.data = info.width
+					// 调用 step() 来表示一组动画完成
+					this.animation.translateX(-this.data).step({
+						duration: 8000,
+						timingFunction: 'linear'
+					})
+					// export方法导出动画数据
+					this.animationData = this.animation.export()
+					// 倒计时
+					this.time = setInterval(() => {
+						// 开奖倒计时、页面显示
+						this.num--
+						// 记录动画执行时间,停止动画计算移动距离时使用
+						this.num2++
+						if (this.num == 0) {
+							clearInterval(this.time)
+						}
+					}, 1000)
+				}).exec();
+				
+				// 不手动停止动画,自动停止
+				setTimeout(() => {
+					this.num = 0
+					this.stop()
+				}, 8000);
+				// #endif
+			},
+			
+			// 停止动画
+			stop() {
+				// 获取屏幕距离,用于计算停止动画移动距离计算
+				let screenWidth = null
+				uni.getSystemInfo({
+					success: function(res) {
+						screenWidth = res.screenWidth;
+					}
+				});
+				this.btnIng = true
+				/**
+				 * 0秒:下标4
+				 * 1秒:下标6
+				 * 2秒:下标8
+				 * 3秒:下标10
+				 * 4秒:下标12
+				 * 5秒:下标14
+				 * 6秒:下标16
+				 * 7秒:下标2
+				 * 8秒:下标2
+				 * */
+				
+				clearInterval(this.time)
+				this.animationData = {}
+				if (this.num2 == 0) {
+					this.list[3][1].url = 'https://cdn.uviewui.com/uview/album/4.jpg'
+				} else if (this.num2 == 1) {
+					this.list[5][1].url = 'https://cdn.uviewui.com/uview/album/4.jpg'
+				} else if (this.num2 == 2) {
+					this.list[7][1].url = 'https://cdn.uviewui.com/uview/album/4.jpg'
+				} else if (this.num2 == 3) {
+					this.list[9][1].url = 'https://cdn.uviewui.com/uview/album/4.jpg'
+				} else if (this.num2 == 4) {
+					this.list[11][1].url = 'https://cdn.uviewui.com/uview/album/4.jpg'
+				} else if (this.num2 == 5) {
+					this.list[13][1].url = 'https://cdn.uviewui.com/uview/album/4.jpg'
+				} else if (this.num2 == 6) {
+					this.list[15][1].url = 'https://cdn.uviewui.com/uview/album/4.jpg'
+				} else if (this.num2 == 7) {
+					// this.list[1][1].url = 'https://cdn.uviewui.com/uview/album/4.jpg'
+					this.$set(this.list[1][1], 'url', 'https://cdn.uviewui.com/uview/album/4.jpg')
+					console.log(this.list[1][1]);
+				} else if (this.num2 == 8) {
+					// #ifdef MP-WEIXIN
+					// this.list[1][1].url = 'https://cdn.uviewui.com/uview/album/4.jpg'
+					this.$set(this.list[1][1], 'url', 'https://cdn.uviewui.com/uview/album/4.jpg')
+					// #endif
+					// #ifdef H5
+					this.$set(this.list[3][1], 'url', 'https://cdn.uviewui.com/uview/album/4.jpg')
+					console.log(this.list[3][1]);
+					// this.list[3][1].url = 'https://cdn.uviewui.com/uview/album/4.jpg'
+					// #endif
+				}
+				// #ifdef H5
+				/**
+				 * 根据动画时间移动到指定位置
+				 * this.data / 8 :动画平均移动距离
+				 * this.num2 : 动画执行时间
+				 * screenWidth * 3 :移动3个屏幕距离
+				 */
+				this.animation.translateX(-(this.data / 8 * this.num2 + screenWidth * 3)).step({
+					duration: 4000,
+					timingFunction: 'ease'
+				})
+				this.animationData = this.animation.export()
+				// #endif
+			
+				// #ifdef MP-WEIXIN
+				uni.createSelectorQuery().in(this).select(".rolling-prize-list").boundingClientRect(info => {
+					this.data = info.width
+					this.animation.translateX(-(this.data / 8 * this.num2 + screenWidth * 3)).step({
+						duration: 4000,
+						timingFunction: 'ease'
+					})
+					this.animationData = this.animation.export()
+				}).exec();
+				// #endif
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.rolling {
+		width: 100%;
+		height: calc(100vh - 44px);
+		background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/prize_bkg1.png) center center no-repeat;
+		background-size: 100vw calc(100vh - 44px);
+		overflow: hidden;
+		
+		// 奖品滚动
+		&-prize {
+			display: flex;
+			margin-top: 30vh;
+			height: 28vh;
+			background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/prize_bkg2.png) center center no-repeat;
+			background-size: 100vw 28vh;
+			margin-bottom: 42rpx;
+			
+			&-list {
+				display: flex;
+				margin-top: 76rpx;
+				height: calc(100% - 76rpx);
+				
+				&-item {
+					width: 100vw;
+					height: 100%;
+					
+					&__items {
+						align-items: flex-start;
+						justify-content: space-evenly;
+						width: 100vw;
+						height: 100%;
+						.content {
+							flex-direction: column;
+							width: 30%;
+							height: 85%;
+							
+							image {
+								width: 100%;
+								height: 60%;
+								margin-bottom: 16rpx;
+							}
+							
+							&-title {
+								width: 100%;
+								line-height: 34rpx;
+								font-size: 26rpx;
+								text-align: center;
+								margin-bottom: 20rpx;
+							}
+
+							&-price {
+								width: 100%;
+								line-height: 26rpx;
+								font-size: 26rpx;
+								text-align: center;
+							}
+						}
+						
+						// .content:nth-child(2) {
+						// 	justify-content: flex-start;
+						// 	color: #333;
+							
+						// 	image {
+						// 		width: 100%;
+						// 		height: 60%;
+						// 	}
+							
+						// 	.content-title {
+						// 		font-weight: bold;
+						// 	}
+							
+						// 	.content-price {
+						// 		font-weight: bold;
+						// 	}
+						// }
+					}
+				}
+			}
+		}
+		
+		// 按钮
+		&-btn {
+			height: 160rpx;
+			margin-bottom: 36rpx;
+			
+			&-content {
+				position: relative;
+				height: 100%;
+				
+				image {
+					width: 486rpx;
+					height: 100%;
+				}
+				
+				&-title {
+					position: absolute;
+					top: 30rpx;
+					font-size: 72rpx;
+					font-family: YouSheBiaoTiHei;
+					font-weight: 400;
+					color: #FFFFFF;
+					line-height: 72rpx;
+					opacity: 0.99;
+				}
+			}
+			
+			.btn-stop {
+				animation: scaleBtn 0.2s linear;
+			}
+			
+			// 放大缩小动画
+			@keyframes scaleBtn {
+				from {
+					transform: scale(0.9);
+				}
+				
+				to {
+					transform: scale(1);
+				}
+			}
+		}
+		
+		// 倒计时
+		&-time {
+			.num {
+				font-size: 110rpx;
+				font-family: YouSheBiaoTiHei;
+				font-weight: 400;
+				color: #FFFFFF;
+				line-height: 110rpx;
+			}
+		}
+	}
+</style>

+ 3 - 0
pages.json

@@ -80,6 +80,9 @@
 				},
 				{
 					"path": "ticket/index"
+				},
+				{
+					"path": "rolling/index"
 				}
 			]
 		},

+ 6 - 6
pages/user/index.vue

@@ -44,15 +44,15 @@
 		<!-- 操作项 -->
 		<view class="action">
 			<u-cell-group :border="false">
-				<u-cell icon="order" title="我的订单" :isLink="true" @click="toOrder"></u-cell>
-				<u-cell icon="map" title="我的地址" :isLink="true" @click="toAddress"></u-cell>
-				<u-cell icon="kefu-ermai" title="联系我们" :isLink="true" @click="contactService"></u-cell>
-				<u-cell icon="info-circle" title="关于我们" :border="false" :isLink="true" :url="'/packageOther/about/index'">
-				</u-cell>
+				<u-cell icon="order" title="我的订单" :isLink="true" @click="toOrder" />
+				<u-cell icon="map" title="我的地址" :isLink="true" @click="toAddress" />
+				<u-cell icon="kefu-ermai" title="联系我们" :isLink="true" @click="contactService" />
+				<u-cell icon="info-circle" title="关于我们" :border="false" :isLink="true" :url="'/packageOther/about/index'" />
+				<u-cell icon="info-circle" title="奖品滚动" :border="false" :isLink="true" :url="'/packagePrize/rolling/index'" />
 			</u-cell-group>
 		</view>
 		<view class="cancel">
-			<u-cell icon="close-circle" title="退出登录" :isLink="true" :border="false" @click="logout"></u-cell>
+			<u-cell icon="close-circle" title="退出登录" :isLink="true" :border="false" @click="logout" />
 		</view>
 		<custom-tab-bar :activeValue="'user'" />
 	</view>