地图滑动优化，大转盘实现

components/hch-position/hch-position.vue

@@ -159,7 +159,7 @@
 					longitude: this.markersIn[this.isActiveMarkerIndex].longitude
 				}
 				this.painter.wait = 1;
-				this.$set(this.painter.base.views, 1, {
+				this.$set(this.painter.base.views, 2, {
 					type: 'image',
 					src: this.markersIn[this.isActiveMarkerIndex].activeIconPath,
 					css: {

components/q-turntable/index.vue

@@ -0,0 +1,168 @@
+<template>
+	<view class="q-t-main">
+		<view :class="{'q-t-rotation':true, 'isEnd': isEnd, 'isReset': isReset}" :style="{transform: `rotate(${rotation}deg)`}">
+			<view class="item"
+				v-for="(item,index) in content" :key="item.id"
+				:style="{transform: `rotate(${itemDeg*index}deg) translateX(${leftParam}rpx)`}"
+			>
+				<view :style="{border: `${borderParam}rpx solid transparent`}">
+					<image src="http://t9.9026.com/imgs/lucky1.png"/>
+					<text>{{item.name}}</text>
+				</view>
+			</view>
+			<image class="circle" src="http://t9.9026.com/imgs/banner14.png"/>
+		</view>
+		<image class="button" src="http://t9.9026.com/imgs/banner04.png" @click="start"/>
+	</view>
+</template>
+
+<script>
+	export default{
+		components:{
+		},
+		props:["drawProducts"],
+		data(){
+			return {
+				content: [],
+				rotation: 0,
+				timer: 0,
+				isEnd: false,
+				isRotation:false,
+				isReset: false
+			}
+		},
+		computed:{
+			itemDeg(){
+				if(!this.content.length) return 0;
+				return 360 / this.content.length;
+			},
+			borderParam(){
+				return Math.tan(this.itemDeg/2 * Math.PI / 180)*250
+			},
+			leftParam(){
+				return 250 - this.borderParam;
+			}
+		},
+		methods:{
+			init(list){
+				this.content = [...list];
+			},
+			start(){
+				if(this.isEnd||this.isRotation) return;
+				this.$emit("start");
+				this.rotation = -360;
+				this.isRotation = true;
+				this.timer = setInterval(()=>{
+					this.rotation -= 360;
+				}, 900)
+			},
+			end(index){
+				const endDeg = this.rotation - this.itemDeg * index - 360
+				clearInterval(this.timer);
+				this.isEnd = true;
+				this.rotation = endDeg;
+				this.isRotation = false;
+				return new Promise((resolve,reject)=>{
+					setTimeout(()=>{
+						resolve(true);
+					}, 2500)
+				})
+			},
+			reset(){
+				this.isEnd = false;
+				this.isReset = true;
+				this.rotation = 0;
+				
+				setTimeout(()=>{
+					this.isReset = false;
+				},100)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.q-t-main{
+		width: 100%;
+		height:500rpx;
+		text-align: center;
+		overflow: hidden;
+		
+		.q-t-rotation{
+			margin:0 auto;
+			width: 500rpx;
+			height:500rpx;
+			overflow: hidden;
+			border-radius: 100%;
+			transition: 1s all linear;
+			// animation: rotation 1s linear infinite;
+			>image{
+				&.circle{
+					position: relative;
+					z-index: 1;
+					width: 100%;
+					height: 100%;
+				}				
+			}
+			&.isEnd{
+				transition: 2.5s all ease-out;
+			}
+			&.isReset{
+				transition: 0s all!important;
+			}
+
+			
+			.item{
+				transform-origin: 250rpx 250rpx;
+				width: 0px;
+				height:0px;
+				overflow: visible;
+				> view {
+					border-bottom: 250rpx solid transparent!important;
+					image{
+						width: 72rpx;
+						height: 86rpx;
+						transform: translate(-36rpx, -200rpx);
+					}
+					text{
+						width: 80rpx;
+						-webkit-transform: translate(-23px, -122px);
+						transform: translate(-40rpx, -205rpx);
+						color: #A8872A;
+						display: block;
+						font-size: 25rpx;
+						font-weight: bold;
+						line-height: 25rpx;
+					}
+				}
+			}
+			
+			.item:nth-of-type(odd) > view{
+				width: 0px;
+				height:0px;
+				border-top: 250rpx solid #F9EABA!important;
+			}
+			.item:nth-of-type(even) > view{
+				width: 0px;
+				height:0px;
+				border-top: 250rpx solid #FBF9F3!important;
+			}
+		}
+	}
+	image.button{
+		position: relative;
+		z-index: 2;
+		width: 100rpx;
+		height: 113rpx;
+		top: -316rpx;
+	}
+	
+	@keyframes rotation {
+		from{
+			transform: rotate(0deg);
+		}
+		to{
+			transform: rotate(360deg);
+		}
+	}
+</style>

components/q-turntable/q-turntable.vue

@@ -92,7 +92,7 @@ export default {
 <style>
 
 .turntable_wp {
-	width: 538rpx;
+	width: 548rpx;
 	height: 548rpx;
 	position: relative;
 	margin: 0 auto;

pages/goods/goods-lucky/index.vue

@@ -5,20 +5,21 @@
 			<view class="spinning-title">
 				<text>{{drawInfo.draw_template.name?drawInfo.draw_template.name:"幸运大轮盘"}}</text>
 			</view>
-			<q-turntable ref="turntable" :areaNumber='9' @start="turntableStart" @success="turntableSuccess">
-			</q-turntable>
+<!-- 			<q-turntable isRenderImage ref="turntable" :areaNumber='9' @start="turntableStart" @success="turntableSuccess">
+			</q-turntable> -->
+			<q-turntable ref="turntable" @start="turntableStart"/>
 		</view>
 
 		<view style="background-color: #f9f9f9; padding-bottom: 136rpx;">
 			<!-- 产品信息 -->
 			<view class="produce">
 				<view class="produce-title">产品信息</view>
-				<view class="produce-main" v-for="item in 6">
-					<image style="width: 132rpx;height: 132rpx;border-radius: 10rpx;" src="/static/icon/banner02.png"
+				<view class="produce-main" v-for="(item,index) in drawInfo.draw_template.draw_config" :key="item.id">
+					<image style="width: 132rpx;height: 132rpx;border-radius: 10rpx;" :src="item.prize_img"
 						mode=""></image>
 					<view class="produce-main-text">
-						<text class="produce-main-text-top">一等奖</text>
-						<text class="produce-main-text-bom">HUAWEI MateBook X Pro</text>
+						<text class="produce-main-text-top">{{item.name}}</text>
+						<text class="produce-main-text-bom">{{item.product.name ? item.product.name : (item.integral?item.integral+"积分":"")}}</text>
 					</view>
 				</view>
 			</view>
@@ -50,7 +51,7 @@
 						<text class="prize-main-left-top">{{item.remark}}</text>
 						<text class="prize-main-left-bom">{{item.created_at}}</text>
 					</view>
-					<view :class="item.status==1 ? 'prize-main-rightSelect' : 'prize-main-right' ">
+					<view v-if="!item.integral" :class="item.status==1 ? 'prize-main-rightSelect' : 'prize-main-right' ">
 						<text v-if="item.status==1">立即兑换</text>
 						<text v-if="item.status==2">已兑换</text>
 					</view>
@@ -65,8 +66,9 @@
 				<view class="img">
 					<image style="width: 80rpx;height: 82rpx" src="/static/icon/gift01.png"></image>
 					<view class="text">
-						<text>恭喜您抽中了<text>{{drawResult.name}}</text></text>
-						<text>请尽快去奖品中心兑奖</text>
+						<text>恭喜您抽中了<text>{{drawResultProduct.name}}</text></text>
+						<text>{{drawResult.name?drawResult.name:drawResultProduct.integral+'积分'}}</text>
+						<text v-if="drawResult.name">请尽快去奖品中心兑奖</text>
 					</view>
 				</view>
 				<view class="btn">
@@ -97,7 +99,7 @@
 </template>
 
 <script>
-	import QTurntable from '@/components/q-turntable/q-turntable.vue'
+	import QTurntable from '@/components/q-turntable'
 	export default {
 		components: {
 			QTurntable
@@ -141,13 +143,13 @@
 					draw_no: ''
 				},
 				drawRecord:[],
-				drawResult:{}
+				drawResult:{},
+				drawResultProduct: {}
 			}
 		},
 		onLoad(params){
 			const {draw_no} = params
 			this.drawInfo.draw_no = draw_no;
-			
 		},
 		onReady(){
 			// this.judageIsDraw(); //判断是否有权限访问
@@ -175,12 +177,19 @@
 				}
 			},
 			getDrawInfo(){
-				this.drawInfo.draw_no = "9HzqlNVBMRZo";
+				if(!this.drawInfo.draw_no){
+					uni.showToast({
+						icon: 'error',
+						title: "暂无权限"
+					})
+					return;
+				}
 				this.$api.draw.drawInfo({
 					draw_no: this.drawInfo.draw_no
 				}).then(res=>{
 					if(res.code == 0){
 						this.drawInfo = res.data;
+						this.$refs.turntable.init(this.drawInfo.draw_template.draw_config);
 					}else{
 						uni.showToast({
 							icon: 'error',
@@ -203,7 +212,7 @@
 				}).then(res=>{
 					if(res.code == 0){
 						res.data.data.forEach(item => {
-							if(item.source == 2){
+							if(item.source == 2 && (item.integral>0 || item.product_id>0)){
 								this.drawRecord.push(item);	
 							}
 						})
@@ -224,31 +233,53 @@
 			dialogClose() {
 				this.drawResult = {};
 				this.$refs.codePurchaseNone.close();
-				this.$refs.codePurchase.close();
+				this.$refs.codePurchase.close();
+				setTimeout(()=>{
+					this.drawResult = {};
+					this.drawResultProduct = {};
+					this.$refs.turntable.reset();
+				}, 500)
 			},
 
 			// 用户点击开始抽奖
 			turntableStart() {
-				if(this.isDrawing) return;
-				this.isDrawing = true
-				let index = Math.floor(Math.random() * 6 + 1) //前端随机数，这里应该后台返回中奖结果
-				// this.award = index
-				this.award = 2
-				this.$refs.turntable.begin(this.award);
+				// if(this.isDrawing) return;
+				// this.isDrawing = true
+				// let index = Math.floor(Math.random() * 6 + 1) //前端随机数，这里应该后台返回中奖结果
+				// // this.award = index
+				// this.award = 2
+				// this.$refs.turntable.begin(this.award);
 				this.$api.draw.luckyDraw({
 					draw_no: this.drawInfo.draw_no,
 				}).then(res => {
-					if(res.data.code != 0){
+					if(res.code != 0 || !res.data){
 						uni.showToast({
 							icon: 'error',
 							title: res.msg?res.msg:"网络繁忙",
 						})
+						this.$refs.turntable.end(0).then(_=>{
+							this.$refs.turntable.reset();
+						});
 						return;
 					}
 					this.drawResult = res.data;
-					setTimeout(()=>{
-						this.isDrawing = false
-					}, 1000)
+					const draw_config = this.drawInfo.draw_template.draw_config;
+					for(let i=0;i<draw_config.length;i++){
+						if(draw_config[i].id == this.drawResult.draw_config_id){
+							this.drawResultProduct = draw_config[i];
+							setTimeout(()=>{
+								console.log(i)
+								this.$refs.turntable.end(i).then(_=>{
+									if(this.drawResultProduct.integral<=0 && !this.drawResultProduct.product){
+										this.$refs.codePurchaseNone.open()
+									}else{
+										this.$refs.codePurchase.open()
+									}
+								});
+							}, 5000)
+							break;
+						}
+					}
 				});
 			},
 

pages/index/index.vue

@@ -324,7 +324,7 @@
 			this.getUserVisits()
 			
 			// uni.navigateTo({
-			// 	url: "/pages/goods/goods-lucky/index"
+			// 	url: "/pages/goods/goods-lucky/index?draw_no=k8PgR7PS5ZLQ"
 			// })
 
 		},

pages/map/map.scss

@@ -397,7 +397,7 @@ page {
 		
 		.address-nav-button{
 			position: fixed;
-			bottom: 225px;
+			bottom: 450rpx;
 			
 			&:first-child{
 				left:16rpx;

pages/map/scrollHotel.vue

@@ -1,15 +1,16 @@
 <template>
-	<view style="width:100%;overflow:hidden">
-	<view class="scroll-hotel" 
-		@touchstart="touchStart"
-		@touchmove="touchMove"
-		@touchend="touchEnd"
+	<scroll-view id="scroll-container" class="scroll-hotel" 
 		@touchcancel="touchEnd"
-		:style="{transform: scrollX,width: totalWidth+'rpx'}"
+		@touchend="touchEnd"
+		@scroll="scroll"
+		:scroll-left="scrolls.scrollX"
+		:scroll-with-animation="true"
+		:scroll-x="true"
+		:scroll-into-view="index"
 	>
 		<view style="width: 16rpx;display: inline-block;"></view>
-		<view class="address-detail" v-for="(item,index) in hotelList" :key="index">
-			<view :class="{mark:true, on:index == -activeIndex}" style="overflow: hidden;">
+		<view :id="`i${index}`" class="address-detail" v-for="(item,index) in hotelList" :key="index">
+			<view :class="{mark:true, on:index == scrolls.activeIndex}" style="overflow: hidden;">
 				<image :src="item.bg_img" mode="aspectFill"></image>
 			</view>
 			<view class="inner">
@@ -38,8 +39,7 @@
 			</view>
 		</view>
 		<view style="width: 16rpx;display: inline-block;"></view>
-	</view>
-	</view>
+	</scroll-view>
 </template>
 
 <script>
@@ -52,23 +52,26 @@
 			},
 			speed: {
 				type: Number,
-				default:4
+				default:2
 			}
 		},
 		data(){
 			return {
+				target:"",
 				scrolls:{
+					r: 0,
 					compensate: 0,
 					screenWidth: 750,
-					scrollX: 0,
+					scrollX: -1,
 					itemWidth: 512,
 					isAppend: false,
+					activeIndex:0,
 				},
 				move:{
 					oldX: 0,
 					direct: 0,
 					isMove: false
-				}
+				},
 			}
 		},
 		computed:{
@@ -89,6 +92,7 @@
 			uni.getSystemInfo({
 				success: (res)=>{
 					const r = res.screenWidth / 750;
+					this.scrolls.r = r
 					const rs = Math.ceil(r * 10)/10;
 					this.scrolls.compensate = Math.abs(Math.floor((r - rs) * 100)/2);
 				}
@@ -96,52 +100,39 @@
 		},
 		methods:{
 			touchStart(e){
-				this.move.oldX = e.touches[0].clientX;
+				// this.move.oldX = e.touches[0].clientX;
 			},
-			touchMove(e){
-				if(this.move.isMove) return;
-				const newX = e.touches[0].clientX
-				const baseSpeed = Math.abs(newX - this.move.oldX);
-				// if(baseSpeed<2) return;
-				
-				this.move.direct = newX > this.move.oldX ? 1 : -1;
-				this.move.oldX = newX;
-				const newScrollX = this.scrolls.scrollX + this.speed*baseSpeed*this.move.direct;
-				if(newScrollX > 20){
-					this.scrolls.scrollX = 20;
-				}else if(this.hotelList.length<=1 && newScrollX < this.maxRight - 20 ){
-					this.scrolls.scrollX = this.maxRight - 20;
-				}else if(this.hotelList.length>1 && newScrollX < this.maxRight  - 40 + (this.scrolls.screenWidth - this.scrolls.itemWidth-16)){
-					this.scrolls.scrollX = this.maxRight  - 40 + (this.scrolls.screenWidth - this.scrolls.itemWidth-16);
-				}else{
-					this.scrolls.scrollX = newScrollX
-				}
-				this.move.isMove = true;
-				setTimeout(()=>{
-					this.move.isMove = false;
-				}, 50)
+			scroll(e){
+				const newScrollX = e.detail.scrollLeft / this.scrolls.r;
+				const newIndex = Math.floor(((newScrollX + 750 + 50) / this.scrolls.itemWidth) - 1)
+				if(this.scrolls.activeIndex == newIndex) return;
+				this.scrolls.activeIndex = newIndex
+				this.$emit('updateIndex', this.scrolls.activeIndex);
 			},
 			touchEnd(isUpdate){
-				if(this.scrolls.scrollX > 0){
-					this.scrolls.scrollX = 0;
-				}else if(this.hotelList.length<=1 && this.scrolls.scrollX < this.maxRight){
-					this.scrolls.scrollX = this.maxRight;
-				}else if(this.hotelList.length>1 && this.scrolls.scrollX < this.maxRight + (this.scrolls.screenWidth - this.scrolls.itemWidth-16)){
-					this.scrolls.scrollX = this.maxRight  + (this.scrolls.screenWidth - this.scrolls.itemWidth-16)
-				}else{
-					if(this.activeIndex == 0){
-						this.scrolls.scrollX = 0;
-					}else if(this.activeIndex == -(this.hotelList.length - 1)){
-						this.scrolls.scrollX = this.maxRight  + (this.scrolls.screenWidth - this.scrolls.itemWidth -16)
-					}else{
-						this.scrolls.scrollX = this.activeIndex * this.scrolls.itemWidth + (this.scrolls.screenWidth - this.scrolls.itemWidth)/2 - this.activeIndex*this.scrolls.compensate;
-					}
-				}
-				isUpdate && this.$emit('updateIndex', -this.activeIndex);
+				// this.scrolls.scrollX =( this.scrolls.activeIndex * this.scrolls.itemWidth - (750 - this.scrolls.itemWidth) / 2 ) + 'rpx'
+					// if(current > 0){
+					// 	this.scrolls.scrollX = 0;
+					// }else if(this.hotelList.length<=1 && current < this.maxRight){
+					// 	this.scrolls.scrollX = this.maxRight;
+					// }else if(this.hotelList.length>1 && current < this.maxRight + (this.scrolls.screenWidth - this.scrolls.itemWidth-16)){
+					// 	this.scrolls.scrollX = this.maxRight  + (this.scrolls.screenWidth - this.scrolls.itemWidth-16)
+					// }else{
+					// 	if(this.activeIndex == 0){
+					// 		this.scrolls.scrollX = 0;
+					// 	}else if(this.activeIndex == -(this.hotelList.length - 1)){
+					// 		this.scrolls.scrollX = this.maxRight  + (this.scrolls.screenWidth - this.scrolls.itemWidth -16)
+					// 	}else{
+					// 		this.scrolls.scrollX = this.activeIndex * this.scrolls.itemWidth + (this.scrolls.screenWidth - this.scrolls.itemWidth)/2 - this.activeIndex*this.scrolls.compensate;
+					// 	}
+					// }
+					// console.log(this.scrolls.scrollX)
+					// isUpdate && this.$emit('updateIndex', -this.activeIndex);
+
 			},
 			setActiveIndex(index){
-				this.scrolls.scrollX = -index * this.scrolls.itemWidth;
-				this.touchEnd(false);
+				this.scrolls.scrollX = ( index * this.scrolls.itemWidth - (750 - this.scrolls.itemWidth) / 2 ) + 'rpx'
+				// this.touchEnd(false);
 			},
 			goBook(){
 				
@@ -152,8 +143,9 @@
 
 <style scoped lang="scss">
 	.scroll-hotel{
+		width: 100%;
 		height:318rpx;white-space: nowrap;
-		transition: transform 100ms linear;
+		transition: transform 5ms linear;
 		
 		.address-detail {
 			display: inline-block;