更新

api/game.js

@@ -0,0 +1,22 @@
+import request from "@/utils/request.js";
+export function getGame(data){
+	return request({
+	url:'/api/many/list',
+	method:'get',
+	data
+	})
+}
+export function getGameDetail(data,id){
+	return request({
+	url:'/api/many/details',
+	method:'get',
+	data
+	})
+}
+export function getPurchase(data,id){
+	return request({
+	url:'/api/many/purchase',
+	method:'post',
+	data
+	})
+}

components/bing-progress/bing-progress.css

@@ -0,0 +1,67 @@
+.bing-progress {
+	position: relative;
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-around;
+}
+.bp-marea {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	position: absolute;
+	left: 0;
+	top: 0;
+	flex-direction: row;
+	align-items: center;
+	text-align: center;
+	justify-content: space-around;
+	background-color: rgba(0,0,0,0);
+	z-index: 6;
+}
+.bp-mview,
+.bp-handle {
+	position: absolute;
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	align-items: center;
+	text-align: center;
+	justify-content: center;
+	z-index: 5;
+}
+.bp-handle-text {
+	text-align: center;
+	z-index: 5;
+}
+.bp-bar_max {
+	position: absolute;
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: row;
+	align-items: center;
+	margin: 0;
+	padding: 0;
+	z-index: 1;
+	overflow: hidden;
+}
+.bp-bar_active {
+	position: absolute;
+	z-index: 3;
+}
+.bp-bar_sub_active {
+	position: absolute;
+	z-index: 2;
+}
+.bp-value {
+	position: absolute;
+	text-align: center;
+	z-index: 4;
+}
+.bp-handle-widget {
+	position: absolute;
+	z-index: 99;
+}

components/bing-progress/bing-progress.vue

@@ -0,0 +1,868 @@
+<template>
+	<view class="bing-progress" :style="{width:bpWidth,height:bpHeight,borderRadius:borderRadius,
+	backgroundColor:backgroundColor,flexDirection:direction!='vertical'?'row':'column'}">
+		<!-- 进度 -->
+		<!-- #ifdef APP-NVUE -->
+		<div class="bp-bar_max"
+		:style="{width:barMaxWidth,height:barMaxHeight,backgroundColor:noActiveColor,
+		flexDirection:direction!='vertical'?'row':'column',left:barMaxLeft,borderRadius:barBorderRadius}">
+			<div class="bp-bar_sub_active"
+			:style="{width:barSubActiveWidth,height:barSubActiveHeight,backgroundColor:subActiveColor,
+			top:subActiveTop,bottom:subActiveBottom,left:subActiveLeft,right:subActiveRight,borderRadius:isActiveCircular?barBorderRadius:0}"></div>
+			<div class="bp-bar_active"
+			:style="{width:barActiveWidth,height:barActiveHeight,backgroundColor:activeColor,
+			top:activeTop,bottom:activeBottom,left:activeLeft,right:activeRight,borderRadius:isActiveCircular?barBorderRadius:0}"></div>
+		</div>
+		<!-- #endif -->
+		<!-- #ifndef APP-NVUE -->
+		<view class="bp-bar_max"
+		:style="{width:barMaxWidth,height:barMaxHeight,backgroundColor:noActiveColor,borderRadius:barBorderRadius,
+		flexDirection:direction!='vertical'?'row':'column',left:barMaxLeft}">
+			<view class="bp-bar_sub_active"
+			:style="{width:barSubActiveWidth,height:barSubActiveHeight,backgroundColor:subActiveColor,
+			top:subActiveTop,bottom:subActiveBottom,left:subActiveLeft,right:subActiveRight,borderRadius:isActiveCircular?barBorderRadius:0}"></view>
+			<view class="bp-bar_active"
+			:style="{width:barActiveWidth,height:barActiveHeight,backgroundColor:activeColor,
+			top:activeTop,bottom:activeBottom,left:activeLeft,right:activeRight,borderRadius:isActiveCircular?barBorderRadius:0}"></view>
+		</view>
+		<!-- #endif -->
+		<movable-area id="bp-marea" class="bp-marea" @touchmove.stop.prevent="touchmove" @touchstart.stop.prevent="touchstart" @touchcancel="touchend" @touchend="touchend"
+		:style="{width:mareaWidth,height:mareaHeight,left:mareaLeft}">
+			<!-- 拖柄 -->
+			<movable-view id="bp-mview" class="bp-mview" :direction="direction=='vertical'?'vertical':'horizontal'" :animation="false"
+			 :disabled="true" :x="handleX" :y="handleY" friction="10" damping="100"
+			:style="{width:mhandleWidth,height:mhandleHeight,backgroundColor:handleColor,
+			borderRadius:handleBorderRadius,fontSize:infoFontSize,top:mhandleTop}">
+				<view id="bp-handle" class="bp-handle" :style="{fontSize:infoFontSize,width:mhandleWidth,height:mhandleHeight,borderRadius:handleBorderRadius}">
+					<image class="bp-handle-img" :src="handleImgUrl" v-if="handleImgUrl" 
+					:style="{fontSize:infoFontSize,width:mhandleWidth,height:mhandleHeight,borderRadius:handleBorderRadius}"></image>
+					<!-- 进度值 -->
+					<text class="bp-handle-text" v-if="handleImgUrl=='' && infoAlign=='handle' && showInfo" 
+					:style="{fontSize:infoFontSize,color:infoColor,width:mhandleWidth,height:textHeight,borderRadius:'20px'}">{{ infoContent=='subValue'?msubValue:showValue }}{{ infoEndText }}</text>
+					<!-- 挂件 -->
+					<!-- #ifndef APP-NVUE -->
+					<!-- 图片挂件 -->
+					<image v-if="widgetPos=='top' && widgetUrl" class="bp-handle-widget" :src="widgetUrl" :style="{flexDirection: 'column',borderRadius:mwidgetBorderRadius, bottom: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}"></image>
+					<image v-if="widgetPos=='right' && widgetUrl" class="bp-handle-widget" :src="widgetUrl" :style="{flexDirection: 'row',borderRadius:mwidgetBorderRadius,left: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}"></image>
+					<image v-if="widgetPos=='bottom' && widgetUrl" class="bp-handle-widget" :src="widgetUrl" :style="{flexDirection: 'column',borderRadius:mwidgetBorderRadius,top: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}"></image>
+					<image v-if="widgetPos=='left' && widgetUrl" class="bp-handle-widget" :src="widgetUrl" :style="{flexDirection: 'row',borderRadius:mwidgetBorderRadius,right: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}"></image>
+					<!-- 自定义元素挂件 -->
+					<view v-if="widgetPos=='top' && widgetUrl==''" class="bp-handle-widget" :style="{flexDirection: 'column',borderRadius:mwidgetBorderRadius,bottom: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}">
+						<slot/>
+					</view>
+					<view v-if="widgetPos=='right' &&  widgetUrl==''" class="bp-handle-widget" :style="{flexDirection: 'row',borderRadius:mwidgetBorderRadius,left: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}">
+						<slot/>
+					</view>
+					<view v-if="widgetPos=='bottom' && widgetUrl==''" class="bp-handle-widget" :style="{flexDirection: 'column',borderRadius:mwidgetBorderRadius,top: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}">
+						<slot/>
+					</view>
+					<view v-if="widgetPos=='left' && widgetUrl==''" class="bp-handle-widget" :style="{flexDirection: 'row',borderRadius:mwidgetBorderRadius,right: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}">
+						<slot/>
+					</view>
+					<!-- #endif -->
+				</view>
+			</movable-view>
+		</movable-area>
+		<!-- 进度值 -->
+		<text class="bp-value" v-if="showValueState() || (infoAlign=='center'&&direction!='vertical' && showInfo)" 
+		:style="{color:infoColor,fontSize:infoFontSize,left:valueLeft,width:valueWidth()+'px'}">{{ infoContent=='subValue'?msubValue:showValue }}{{ infoEndText }}</text>
+	</view>
+</template>
+
+<script>
+	/**
+	 * 进度条，副进度条
+	 */
+	export default {
+		created() {
+			/**
+			 * 获取系统屏幕信息，用于后续单位换算
+			 */
+			const systemInfo = uni.getSystemInfoSync()
+			this.px2rpx = 750 / systemInfo.screenWidth
+			this.screenWidth = systemInfo.screenWidth
+			this.screenHeight = systemInfo.screenHeight
+		},
+		mounted() {
+			// #ifndef APP-NVUE
+			/**
+			 * 非NVUE movable-area 滑动事件获取到的位置是相对于文档的，获取组件位置，用于计算滑块位置
+			 */
+			this.updateRect()
+			// #endif
+			this.mmax = this.valueFormat(this.max,false)
+			this.percent = Math.abs((this.valueFormat(this.value) - this.min) / (this.mmax - this.min))
+			this.subPercent = Math.abs((this.valueFormat(this.subValue,true) - this.min) / (this.mmax - this.min))
+			if(this.reverse) {
+				if(this.direction!='vertical') {
+					this.handleX = (1 - this.percent) * this.barMaxLength
+				}
+				else {
+					this.handleY = this.percent * this.barMaxLength
+				}
+			}
+			else {
+				if(this.direction!='vertical') {
+					this.handleX = this.percent * this.barMaxLength
+				}
+				else {
+					this.handleY = (1 - this.percent) * this.barMaxLength
+				}
+			}
+			if(this.bpname=='test') {
+				console.log(this.mainInfo)
+			}
+		},
+		/**
+		 * sub表示副进度条属性
+		 */
+		props: {
+			// 组件名字
+			bpname: {
+				type: String,
+				default: ''
+			},
+			width: {
+				type: String,
+				default: '300px'
+			},
+			strokeWidth: {
+				type: String,
+				default: '30px'
+			},
+			backgroundColor: {
+				type: String,
+				default: 'rgba(0,0,0,0)'
+			},
+			noActiveColor: {
+				type: String,
+				default: "#00ffff"
+			},
+			activeColor: {
+				type: String,
+				default: "#0000ff"
+			},
+			subActiveColor: {
+				type: String,
+				default: "#ffaaaa"
+			},
+			handleColor: {
+				type: String,
+				default: "#ffff00"
+			},
+			infoColor: {
+				type: String,
+				default: "#000000"
+			},
+			// 整个进度条的外边界圆角半径
+			borderRadius: {
+				type: String,
+				default: '5px'
+			},
+			// 进度条内部滑轨圆角半径
+			barBorderRadius: {
+				type: String,
+				default: '5px'
+			},
+			// active and subActive 是否显示圆角 NVUE默认true，其他默认false
+			// #ifdef APP-NVUE
+			isActiveCircular: {
+				type: Boolean,
+				default: true
+			},
+			// #endif
+			// #ifndef APP-NVUE
+			isActiveCircular: {
+				type: Boolean,
+				default: false
+			},
+			// #endif
+			handleWidth: {
+				type: String,
+				default: '50px'
+			},
+			handleHeight: {
+				type: String,
+				default: '40px'
+			},
+			handleBorderRadius: {
+				type: String,
+				default: '5px'
+			},
+			handleImgUrl: {
+				type: String,
+				default: ''
+			},
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			direction: {
+				type: String,
+				default: 'horizontal'
+			},
+			infoEndText: {
+				type: String,
+				default: ""
+			},
+			infoFontSize: {
+				type: String,
+				default: '18px'
+			},
+			showInfo: {
+				type: Boolean,
+				default: true
+			},
+			// 进度值显示value还是subValue
+			infoContent: {
+				type: String,
+				default: 'value'
+			},
+			// 进度值显示位置 left, right, center, handle
+			infoAlign: {
+				type: String,
+				default: 'right'
+			},
+			max: {
+				type: Number,
+				default: 100
+			},
+			min: {
+				type: Number,
+				default: 0
+			},
+			value: {
+				type: Number,
+				default: 0
+			},
+			subValue: {
+				type: Number,
+				default: 0
+			},
+			step: {
+				type: Number,
+				default: 1
+			},
+			// 副进度条步长
+			subStep: {
+				type: Number,
+				default: 1
+			},
+			// true连续滑动，false步进，即以step的间隔变化
+			continuous: {
+				type: Boolean,
+				default: true
+			},
+			// 副进度条continuous
+			subContinuous: {
+				type: Boolean,
+				default: true
+			},
+			reverse: {
+				type: Boolean,
+				default: false
+			},
+			// 挂件位置 top, right, bottom, left
+			widgetPos: {
+				type: String,
+				default: "top"
+			},
+			widgetHeight: {
+				type: [String,Number],
+				default: '40px'
+			},
+			widgetWidth: {
+				type: [String,Number],
+				default: '50px'
+			},
+			widgetBorderRadius: {
+				type: [String,Number],
+				default: '5px'
+			},
+			// 挂件不透明度 0完全透明 1不透明
+			widgetOpacity: {
+				type: [String,Number],
+				default: 1
+			},
+			// 挂件距离组件的偏移量，正数原理组件，负数靠近组件
+			widgetOffset: {
+				type: [String,Number],
+				default: '0px'
+			},
+			// 挂件图片
+			widgetUrl: {
+				type: String,
+				default: ''
+			},
+			// 挂件旋转角度
+			widgetAngle: {
+				type: [String,Number],
+				default: 0
+			}
+		},
+		data() {
+			return {
+				handleX: 50,
+				handleY: 0,
+				px2rpx: 1,
+				percent: 0, // 0-1
+				subPercent: 0, // 0-1
+				mainInfo: {
+					left: 0,
+					top: 0,
+					bottom: 0,
+					right: 0
+				},
+				touchState: false,
+				screenHeight: 0,
+				screenWidth: 0,
+				msubValue: 0,
+				moveable: true,
+				lastTouchTime: 0,
+				mmax: 100
+			}
+		},
+		watch: {
+			/**
+			 * @param {Object} newValue
+			 * @param {Object} oldValue
+			 */
+			value(newValue, oldValue) {
+				if(!this.touchState) {
+					newValue = this.valueSetBoundary(newValue)
+					this.percent = Math.abs((newValue - this.min) / (this.mmax - this.min))
+				}
+			},
+			showValue(newValue, oldValue) {
+				// 步进
+				if(!this.continuous) {
+					let percent
+					if(this.reverse) {
+						if(this.direction!='vertical') {
+							percent = Math.abs(1 - (newValue - this.min) / (this.mmax - this.min))
+							this.handleX = percent * this.barMaxLength
+						}
+						else {
+							percent = Math.abs((newValue - this.min) / (this.mmax - this.min))
+							this.handleY = percent * this.barMaxLength
+						}
+					}
+					else {
+						if(this.direction!='vertical') {
+							percent = Math.abs((newValue - this.min) / (this.mmax - this.min))
+							this.handleX = percent * this.barMaxLength
+						}
+						else {
+							percent = (1 - Math.abs((newValue - this.min) / (this.mmax - this.min)))
+							this.handleY = percent * this.barMaxLength
+						}
+					}
+					
+				}
+				this.$emit("change", {bpname: this.bpname,type: 'change',value:this.showValue,subValue:this.msubValue})
+				this.$emit("valuechange", {bpname: this.bpname,type: 'valuechange',value:this.showValue,subValue:this.msubValue})
+			},
+			percent(newValue, oldValue) {
+				// 连续
+				if(this.continuous) {
+					if(this.reverse) {
+						if(this.direction!='vertical') {
+							this.handleX = (1 - newValue) * this.barMaxLength
+						}
+						else {
+							this.handleY = newValue * this.barMaxLength
+						}
+					}
+					else {
+						if(this.direction!='vertical') {
+							this.handleX = newValue * this.barMaxLength
+						}
+						else {
+							this.handleY = (1 - newValue) * this.barMaxLength
+						}
+					}
+				}
+			},
+			subValue(newValue, oldValue) {
+				newValue = this.valueSetBoundary(newValue)
+				
+				if(this.subContinuous) {
+					this.msubValue = newValue
+				}
+				else {
+					this.msubValue = this.valueFormat(newValue, true)
+				}
+				this.subPercent = Math.abs((newValue - this.min) / (this.mmax - this.min))
+				this.$emit("change", {bpname: this.bpname,type: 'change',value:this.showValue,subValue:this.msubValue})
+				this.$emit("subvaluechange", {bpname: this.bpname,type: 'subvaluechange',value:this.showValue,subValue:this.msubValue})
+				
+			},
+			max(newValue,oldValue) {
+				this.mmax = this.valueFormat(newValue,false)
+			}
+		},
+		computed: {
+			bpWidth() {
+				if(this.direction=="vertical") {
+					return this.maxHeight()[2]
+				}
+				return this.sizeDeal(this.width)[2]
+			},
+			bpHeight() {
+				if(this.direction=="vertical") {
+					return this.sizeDeal(this.width)[2]
+				}
+				return this.maxHeight()[2]
+			},
+			mareaWidth() {
+				if(this.direction=="vertical") {
+					return this.maxHeight()[2]
+				}
+				let width = this.sizeDeal(this.width)[0]
+				return (width - this.textWidth()) + 'px'
+			},
+			mareaHeight() {
+				if(this.direction=="vertical") {
+					let width = this.sizeDeal(this.width)[0]
+					return (width - this.textWidth()) + 'px'
+				}
+				return this.maxHeight()[2]
+			},
+			mareaLeft() {
+				if(this.showValueState()) {
+					if(this.infoAlign == 'left') {
+						return this.textWidth() + 'px'
+					}
+				}
+				return 0
+			},
+			barMaxHeight() {
+				if(this.direction=="vertical") {
+					let width = this.sizeDeal(this.width)[0]
+					let handleWidth = this.sizeDeal(this.handleWidth)
+					return (width - this.textWidth() - handleWidth[0]) + 'px'
+				}
+				return this.sizeDeal(this.strokeWidth)[2]
+			},
+			barMaxWidth() {
+				if(this.direction=="vertical") {
+					return this.sizeDeal(this.strokeWidth)[2]
+				}
+				let width = this.sizeDeal(this.width)[0]
+				let handleWidth = this.sizeDeal(this.handleWidth)
+				return (width - this.textWidth() - handleWidth[0]) + 'px'
+			},
+			barMaxLeft() {
+				if(this.showValueState()) {
+					if(this.infoAlign == 'left') {
+						return this.textWidth() + this.sizeDeal(this.handleWidth)[0] / 2 + 'px'
+					}
+				}
+				if(this.direction != 'vertical') {
+					return this.sizeDeal(this.handleWidth)[0] / 2 + 'px'
+				}
+				// vertical
+				return (this.maxHeight()[0] - this.sizeDeal(this.strokeWidth)[0]) / 2 + 'px'
+				
+			},
+			activeRight() {
+				if(this.reverse) {
+					return 0
+				}
+				return 'unset'
+			},
+			activeLeft() {
+				if(this.reverse) {
+					return 'unset'
+				}
+				return 0
+			},
+			activeTop() {
+				if(this.reverse) {
+					return 0
+				}
+				return 'unset'
+			},
+			activeBottom() {
+				if(this.reverse) {
+					return 'unset'
+				}
+				return 0
+			},
+			barActiveWidth() {
+				if(this.direction=="vertical") {
+					return this.sizeDeal(this.strokeWidth)[2]
+				}
+				let percent
+				if(this.continuous) {
+					percent = this.percent
+				}
+				else {
+					percent = Math.abs((this.showValue - this.min) / (this.mmax - this.min))
+				}
+				return this.barMaxLength * percent + 'px'
+			},
+			barActiveHeight() {
+				if(this.direction=="vertical") {
+					let percent
+					if(this.continuous) {
+						percent = this.percent
+					}
+					else {
+						percent = Math.abs((this.showValue - this.min) / (this.mmax - this.min))
+					}
+					return this.barMaxLength * percent + 'px'
+				}
+				return this.sizeDeal(this.strokeWidth)[2]
+			},
+			subActiveTop() {
+				if(this.reverse) {
+					return 0
+				}
+				return 'unset'
+			},
+			subActiveBottom() {
+				if(this.reverse) {
+					return 'unset'
+				}
+				return 0
+			},
+			subActiveRight() {
+				if(this.reverse) {
+					return 0
+				}
+				return 'unset'
+			},
+			subActiveLeft() {
+				if(this.reverse) {
+					return 'unset'
+				}
+				return 0
+			},
+			barSubActiveWidth() {
+				if(this.direction == "vertical") {
+					return this.sizeDeal(this.strokeWidth)[2]
+				}
+				if(this.subContinuous) {
+					return this.barMaxLength * this.subPercent + 'px'
+				}
+				else {
+					return this.barMaxLength * Math.abs((this.msubValue - this.min) / (this.mmax - this.min)) + 'px'
+				}
+				
+			},
+			barSubActiveHeight() {
+				if(this.direction == "vertical") {
+					if(this.subContinuous) {
+						return this.barMaxLength * this.subPercent + 'px'
+					}
+					else {
+						this.barMaxLength * Math.abs((this.msubValue - this.min) / (this.mmax - this.min)) + 'px'
+					}
+					
+				}
+				return this.sizeDeal(this.strokeWidth)[2]
+			},
+			mhandleWidth() {
+				if(this.direction == "vertical") {
+					return this.sizeDeal(this.handleHeight)[2]
+				}
+				return this.sizeDeal(this.handleWidth)[2]
+			},
+			mhandleHeight() {
+				if(this.direction == "vertical") {
+					return this.sizeDeal(this.handleWidth)[2]
+				}
+				return this.sizeDeal(this.handleHeight)[2]
+			},
+			mhandleTop() {
+				if(this.direction == 'vertical') {
+					return 0
+				}
+				else {
+					// 拖柄垂直居中
+					let handle = this.sizeDeal(this.handleHeight)[0]
+					let top = this.maxHeight()[0] / 2 - handle / 2 + 'px'
+					return top
+				}
+			},
+			showValue() {
+				return this.valueFormat(this.percent * (this.mmax - this.min) + this.min)
+			},
+			textHeight() {
+				let infoSize = this.sizeDeal(this.infoFontSize)
+				return infoSize[0]*1.2 + infoSize[1]
+			},
+			valueLeft() {
+				if(this.infoAlign=='left') {
+					return 0
+				}
+				else if(this.infoAlign == 'center') {
+					let width = this.sizeDeal(this.width)
+					return width[0]/2 - this.valueWidth()/2 + 'px'
+				}
+				else if(this.infoAlign=='right'){
+					let width = this.sizeDeal(this.width)
+					return width[0] - this.textWidth() + 'px'
+				}
+				return 0
+			},
+			barMaxLength() {
+				let width = this.sizeDeal(this.width)[0]
+				let handleWidth = this.sizeDeal(this.handleWidth)
+				return width - this.textWidth() - handleWidth[0]
+			},
+			mwidgetWidth() {
+				return this.sizeDeal(this.widgetWidth)[2];
+			},
+			mwidgetHeight() {
+				return this.sizeDeal(this.widgetHeight)[2];
+			},
+			moffset() {
+				let off = this.sizeDeal(this.widgetOffset);
+				// console.log(off)
+				switch(this.widgetPos) {
+					case 'top':
+						return this.sizeDeal(this.mhandleHeight)[0] + off[0] + 'px'
+					case 'right':
+						return this.sizeDeal(this.mhandleWidth)[0] + off[0] + 'px'
+					case 'bottom':
+						return this.sizeDeal(this.mhandleHeight)[0] + off[0] + 'px'
+					case 'left':
+						return this.sizeDeal(this.mhandleWidth)[0] + off[0] + 'px'
+				}
+				return 0
+			},
+			mwidgetBorderRadius() {
+				return this.sizeDeal(this.widgetBorderRadius)[2];
+			},
+			mwidgetAngle() {
+				return "rotate("+Number(this.widgetAngle)+"deg)"
+			}
+		},
+		methods: {
+			prevent(e) {
+				console.log(1)
+			},
+			updateRect() {
+				// #ifndef APP-NVUE
+				/**
+				 * 非NVUE movable-area 滑动事件获取到的位置是相对于文档的，获取组件位置，用于计算滑块位置
+				 */
+				let query = uni.createSelectorQuery().in(this)
+				query.select('.bing-progress').boundingClientRect(data => {
+					this.mainInfo.top = data.top
+					this.mainInfo.left = data.left
+					this.mainInfo.bottom = data.bottom
+					this.mainInfo.right = data.right
+				}).exec()
+				// #endif
+			},
+			touchstart(e) {
+				if(!this.disabled) {
+					// #ifdef APP-NVUE
+					e.stopPropagation()
+					e.target.attr.preventGesture = true
+					if(this.direction == 'vertical' && e.target.attr.id != 'bp-mview' && (e.timestamp - this.lastTouchTime > 100)) {
+						this.moveable = false
+					}
+					this.lastTouchTime = e.timestamp
+					// #endif
+					// #ifndef APP-NVUE
+					/**
+					 * 防止组件在文档流中的位置被修改，导致组件进度值异常
+					 */
+					this.updateRect()
+					// #endif
+					// 阻止组件信息异常情况下的进度值修改
+					if(this.mainInfo.top > this.screenHeight) {
+						this.$emit("dragstart", {bpname: this.bpname,type: 'dragstart',value:this.showValue,subValue:this.msubValue})
+						return
+					}
+					this.touchState = true
+					let detail = e.changedTouches[0]
+					this.handleMove(detail)
+					this.$emit("dragstart", {bpname: this.bpname,type: 'dragstart',value:this.showValue,subValue:this.msubValue})
+				}
+			},
+			touchmove(e) {
+				if(!this.disabled) {
+					let detail = e.changedTouches[0]
+					this.handleMove(detail)
+					this.$emit("dragging", {bpname: this.bpname,type: 'dragging',value:this.showValue,subValue:this.msubValue})
+				}
+			},
+			touchend(e) {
+				if(!this.disabled) {
+					// #ifdef APP-NVUE
+					if(!this.moveable) {
+						this.moveable = true
+						return
+					}
+					// #endif
+					let detail = e.changedTouches[0]
+					this.handleMove(detail)
+					this.touchState = false
+					this.$emit("dragend", {bpname: this.bpname,type: 'dragend',value:this.showValue,subValue:this.msubValue})
+				}
+			},
+			handleMove(detail) {
+				let width = this.sizeDeal(this.width)[0]
+				let handleWidth = this.sizeDeal(this.handleWidth)
+				let percent
+				if(this.direction!='vertical') {
+					if(this.infoAlign=='left') {
+						// #ifndef APP-NVUE
+						percent = (detail.pageX - this.mainInfo.left - this.textWidth() - handleWidth[0]/2)/ this.barMaxLength
+						// #endif
+						// #ifdef APP-NVUE
+						percent = (detail.pageX  - handleWidth[0]/2)/ this.barMaxLength
+						// #endif
+					}
+					else {
+						// #ifndef APP-NVUE
+						percent = (detail.pageX - this.mainInfo.left - handleWidth[0]/2)/ this.barMaxLength
+						// #endif
+						// #ifdef APP-NVUE
+						percent = (detail.pageX - handleWidth[0]/2)/ this.barMaxLength
+						// #endif
+					}
+				}
+				else {
+					// #ifdef APP-NVUE
+					percent = 1 - (detail.pageY - handleWidth[0]/2- 1) / this.barMaxLength
+					// #endif
+					// #ifndef APP-NVUE
+					percent = 1 - (detail.clientY - this.mainInfo.top - handleWidth[0]/2)/ this.barMaxLength
+					// #endif
+				}
+				percent = percent > 0 ? percent : 0
+				percent = percent < 1 ? percent : 1
+				if(this.reverse) {
+					this.percent = 1 - percent
+				}
+				else {
+					this.percent = percent
+				}
+			},
+			showValueState() {
+				if(this.direction != 'vertical' && this.showInfo && (this.infoAlign=='left' || this.infoAlign=='right')) {
+					return true
+				}
+				return false
+			},
+			valueSetBoundary(value) {
+				// 控制value在合法范围内
+				if(this.mmax > this.min) {
+					value = value < this.mmax ? value : this.mmax
+					value = value > this.min ? value : this.min
+				}
+				else {
+					value = value > this.mmax ? value : this.mmax
+					value = value < this.min ? value : this.min
+				}
+				return value
+			},
+			/**
+			 * @param {Object} v
+			 * @param {Object} isSub 是否是副副进度条
+			 */
+			valueFormat (v,isSub){
+				// set step
+				v = this.valueSetBoundary(v)
+				let stepInfo = this.stepInfo(isSub)
+				v = Number(v - this.min).toFixed(stepInfo[1])
+				let step = stepInfo[0] * 10 ** stepInfo[1]
+				let valueE = v * 10 ** stepInfo[1]
+				let remainder = valueE % step
+				let remainderInt = Math.floor(remainder)
+				// 对余数四舍五入0-1
+				let sub = Math.round(remainder / step)
+				let value = (Math.floor(valueE) - remainderInt + sub*step) / (10 ** stepInfo[1])
+				value = Number((value + this.min).toFixed(stepInfo[1]))
+				return value
+			},
+			/**
+			 * @param {Object} v
+			 * @param {Object} isSub 是否是副副进度条
+			 */
+			stepInfo(isSub) {
+				// return step, decimal位数
+				let step 
+				if(isSub) {
+					step = Number(this.subStep)
+				}
+				else {
+					step = Number(this.step)
+				}
+				
+				if (step <= 0 || !step){
+					return [1, 0]
+				}
+				else{
+					let steps = step.toString().split('.')
+					if (steps.length == 1){
+						return [step,0]
+					}
+					else {
+						return [step,steps[1].length]
+					}
+				}
+			},
+			textWidth() {
+				if(this.showValueState()) {
+					let numWidth = this.mmax.toString().length> this.min.toString().length? this.mmax.toString().length: this.min.toString().length
+					let textWidth = ((numWidth + this.stepInfo()[1]) * 0.7 + this.infoEndText.length) * this.sizeDeal(this.infoFontSize)[0]
+					return Number(textWidth.toFixed(2))
+				}
+				return 0
+			},
+			valueWidth() {
+				let numWidth = this.mmax.toString().length> this.min.toString().length? this.mmax.toString().length: this.min.toString().length
+				let textWidth = ((numWidth + this.stepInfo()[1]) * 0.7 + this.infoEndText.length) * this.sizeDeal(this.infoFontSize)[0]
+				return Number(textWidth.toFixed(2))
+			},
+			maxHeight() {
+				let h = []
+				if (this.direction!='vertical'){ // direction 为 vertical 时不显示info
+					let subt = this.infoEndText.match(/[^\x00-\xff]/g)
+					if (subt){
+						h.push(this.sizeDeal(this.infoFontSize)[0] * 1.1)
+					}
+					else{
+						h.push(this.sizeDeal(this.infoFontSize)[0])
+					}
+				}
+				h.push(this.sizeDeal(this.strokeWidth)[0])
+				h.push(this.sizeDeal(this.handleHeight)[0])
+				h.sort(function(a, b) {
+					return b - a
+				}) // 降序
+				return [h[0], 'px', h[0] + 'px']
+			},
+			sizeDeal(size) {
+				// 分离字体大小和单位,rpx 转 px
+				let s = Number.isNaN(parseFloat(size)) ? 0 : parseFloat(size)
+				let u = size.toString().replace(/[0-9\.]/g, '')
+				if (u == 'rpx') {
+					s /= this.px2rpx
+					u = 'px'
+				}else if (u == 'vw') {
+					u = 'px'
+					s = s / 100 * this.screenWidth
+				} else if(u == 'vh') {
+					u = 'px'
+					s = s / 100 * this.screenHeight
+				} else{
+					u = 'px'
+				}
+ 				
+				return [s, u, s + u]
+			},
+		}
+	}
+</script>
+
+<style scoped>
+	@import "bing-progress.css"
+</style>

manifest.json

@@ -74,7 +74,7 @@
             "proxy" : {
                 "/api" : {
                     // "target" : "http://lnpt.frp.liuniu946.com/api",
-                    "target" : "https://xl.liuniu946.com/api",
+                    "target" : "http://xhg.frp.liuniu946.com/api",
                     // "changeOrigin": true,
                     "pathRewrite" : {
                         "/api" : "" // rewrite path

pages/game/game.vue

@@ -1,14 +1,19 @@
 <template>
 	<view class="center">
-		<view class="game-box" @click="goGame(0)">
-			<image src="../../static/img/game01.png" mode=""></image>
-			<view class="game-box-content">开打时间
-				<view class="game-box-content1">
-					每天10:00
+		<view class="box" v-for="(item,index) in gameList " >
+			<!-- <view class="box-title">
+				{{item.name}}
+			</view> -->
+			<view class="game-box" @click="goGame(item.id,index)">
+				<image :src="'../../static/img/game0'+(index%5+1)+'.png'" mode=""></image>
+				<view class="game-box-content">{{item.add_time}}
+					<view class="game-box-content1">
+						{{item.end_time}}
+					</view>
 				</view>
 			</view>
 		</view>
-		<view class="game-box" @click="goGame(1)">
+		<!-- 	<view class="game-box" @click="goGame(1)">
 			<image src="../../static/img/game02.png" mode=""></image>
 			<view class="game-box-content" style="color: #BA4FBC;">开打时间
 				<view class="game-box-content1" style="background-color: #BA4FBC;">
@@ -32,14 +37,14 @@
 				</view>
 			</view>
 		</view>
-		<view class="game-box"@click="goGame(4)">
+		<view class="game-box" @click="goGame(4)">
 			<image src="../../static/img/game05.png" mode=""></image>
 			<view class="game-box-content" style="color:#21BB9F;">开打时间
 				<view class="game-box-content1" style="background-color: #21BB9F;">
 					每天10:00
 				</view>
 			</view>
-		</view>
+		</view> -->
 		<!-- <view class="kong">
 			<u-empty mode="data" text="敬请期待"></u-empty>
 		</view> -->
@@ -48,71 +53,97 @@
 </template>
 
 <script>
-import { tabbar } from '@/utils/tabbar.js';
-export default {
-	data() {
-		return {
-			tabbar: tabbar,
-			current: 2,
-		};
-	},
-	methods: {
-		goGame(e) {
-			console.log(e,'点击跳转');
-			uni.navigateTo({
-				url:'./gameDetail?id='+e
+	import {
+		getGame
+	} from '@/api/game.js'
+	import {
+		tabbar
+	} from '@/utils/tabbar.js';
+	export default {
+		data() {
+			return {
+			
+				tabbar: tabbar,
+				current: 2,
+				add_time: '', //开始事件
+				end_time: '', //结束时间
+				gameList: '', //游戏列表
+			};
+		},
+		onShow() {
+			getGame().then(res => {
+				console.log(res, 'res');
+				this.gameList = res.data.data
 			})
-		}
-	},
-};
+		},
+		methods: {
+			goGame(e,index) {
+				console.log(e, '点击跳转');
+				uni.navigateTo({
+					url: './gameDetail?id=' + e+'&index='+index
+				})
+			}
+		},
+	};
 </script>
 
 <style lang="scss">
-	.center{
+	.center {
 		width: 750rpx;
 		padding: 0;
 		margin: 20rpx;
 	}
-	.game-box{
+	.box-title{
+		display: flex;
+		font-size: 28rpx;
+		font-weight: 500;
+	}
+	.game-box {
 		position: relative;
-		
 		// margin: 10rpx;
 		width: 690rpx;
 		height: 280rpx;
-		image{
+
+		image {
 			width: 100%;
 			height: 100%;
-			
+
 		}
 	}
-	.game-box-content{
-		top: 180rpx;
+
+
+	.game-box-content {
+		top: 200rpx;
 		left: 60rpx;
-		line-height: 52rpx;
+		line-height: 40rpx;
 		position: absolute;
-		font-size: 26rpx;
+		font-size: 24rpx;
 		font-weight: 500;
 		color: #8F6AFD;
-		padding-left: 30rpx;
-		width: 320rpx;
-		height: 52rpx;
+		padding-left: 10rpx;
+		width: 500rpx;
+		height: 40rpx;
 		background: #FFFFFF;
 		border-radius: 27rpx;
-		.game-box-content1{
+		align-items: center;
+
+		.game-box-content1 {
+			align-items: center;
 			position: absolute;
 			right: 0;
 			top: 0;
-			line-height: 53rpx;
+			line-height: 40rpx;
 			text-align: center;
-			width: 170rpx;
-			height: 53rpx;
+			width: 270rpx;
+			height: 40rpx;
 			background: #754AF0;
 			border-radius: 27rpx;
-			font-size: 26rpx;
+			font-size: 24rpx;
 			font-weight: 500;
 			color: #FFFFFF;
 		}
 	}
+
 	// .kong {
 	// 	height: 100vh;
 	// 	width: 750rpx;

pages/game/gameDetail.vue

@@ -3,105 +3,237 @@
 		<view class="game-top-bg">
 			<image src="../../static/game/game06.png" mode=""></image>
 			<view class="game-top-time">
-				第31期&nbsp;立即预约结束仅剩<span>03</span>时<span>03</span>分<span>03</span>秒
+				第{{guaishouList.stage}}期&nbsp;立即预约结束仅剩 <span>{{hour.day}}</span>天<span>{{hour.hours}}</span>时<span>{{hour.minutes}}</span>分<span>{{hour.seconds}}</span>秒
 			</view>
 			<view class="game-top-xl">
 				<view class="xl">
-					血量值:&nbsp;14585745/458789654
+					血量值:&nbsp;{{guaishouList.number}}/{{guaishouList.money*1}}
 				</view>
 				<view class="xl-t">
 					<!-- 血量进度条 暂未开发! -->
-					<progress></progress>
-					
+					<!-- <prog value= "80"></prog> -->
+					<!-- change进度条变化时候触发 -->
+					<bing-progress change="change" :value="getJd" width="474rpx" noActiveColor="#EB97E4"
+						infoColor="#fff" :isActiveCircular="false" barBorderRadius="20px" :disabled="true"
+						infoContent="value" infoEndText="%" handleWidth="0" infoFontSize="20rpx" strokeWidth="31rpx"
+						:continuous="true" :subContinuous="true" infoAlign="center" activeColor="#D461CD">
+					</bing-progress>
+
 				</view>
 			</view>
 			<view class="xgs">
-				<image :src="xiaoguaishou" mode=""></image>
+				<image :src="'../../static/game/reb0'+(index%5+1)+'.png'" mode=""></image>
 			</view>
 			<view class="id">
-				作战Id:1-期数Id:30
+				作战Id:{{guaishouList.id}}-期数Id:{{guaishouList.stage}}
 			</view>
 			<view class="gl">
 				<image src="../../static/game/game08.png" mode=""></image>
+
 			</view>
 		</view>
 		<view class="edu">
-			本次参与额度:1~4500
+			本次参与额度:1~{{guaishouList.upper_limit*1}}
 		</view>
 		<view class="button">
-			<image src="../../static/game/game07.png" mode=""></image>
+			<image v-if="isGoumai==false" src="../../static/game/game07.png" mode="" @click="yue"></image>
+			<image v-else src="../../static/game/game10.png" mode=""></image>
 		</view>
 		<view class="u-table">
-		<view class="column">
-			<view class="table-box">
-				<view class="table-img">
-					<image src="../../static/game/game04.png" mode=""></image>
+			<view class="column">
+				<view class="table-box">
+					<view class="table-img">
+						<image src="../../static/game/game04.png" mode=""></image>
+					</view>
+					<view class="table-title">
+						<view class="table-top">
+							200
+						</view>
+						<view class="table-top">
+							白积分
+						</view>
+					</view>
 				</view>
-				<view class="table-title">
-					<view class="table-top">
-						200
+				<view class="table-box">
+					<view class="table-img">
+						<image src="../../static/game/game05.png" mode=""></image>
 					</view>
-					<view class="table-top">
-						白积分
+					<view class="table-title">
+						<view class="table-top">
+							200
+						</view>
+						<view class="table-top">
+							紫积分
+						</view>
 					</view>
 				</view>
 			</view>
-			<view class="table-box">
-				<view class="table-img">
-					<image src="../../static/game/game05.png" mode=""></image>
+			<view class="aa">
+			</view>
+			<view class="bb">
+			</view>
+			<view class="column">
+				<view class="table-box">
+					<view class="table-img">
+						<image src="../../static/game/game03.png" mode=""></image>
+					</view>
+					<view class="table-title">
+						<view class="table-top">
+							200
+						</view>
+						<view class="table-top">
+							绿卡
+						</view>
+					</view>
 				</view>
-				<view class="table-title">
-					<view class="table-top">
-						200
+				<view class="table-box">
+					<view class="table-img">
+						<image src="../../static/game/game02.png" mode=""></image>
 					</view>
-					<view class="table-top">
-						紫积分
+					<view class="table-title">
+						<view class="table-top">
+							200
+						</view>
+						<view class="table-top">
+							绿积分
+						</view>
 					</view>
 				</view>
 			</view>
 		</view>
-			<view class="a" style="width: 685rpx;top:152rpx;position: absolute;height: 2rpx;background: #7F69D8;"></view>
-			<view class="a" style="width: 2rpx;height: 305rpx;background: #7F69D8; margin-left:343rpx; top: 0; position: absolute;"></view>
-		<view class="column">
-			<view class="table-box">
-				<view class="table-img">
-					<image src="../../static/game/game03.png" mode=""></image>
+		<!-- <uni-popup ref="popup" type="center">
+			<view class="yue-box">
+				<view class="yue-tit">
+					抢购
 				</view>
-				<view class="table-title">
-					<view class="table-top">
-						200
-					</view>
-					<view class="table-top">
-						绿卡
-					</view>
+				<view class="yue-content">
+					您有{{number}}张绿卡可直接抢购,要使用吗?
+				</view>
+				<view class="comfirm-box">
+					<view class="cancel" @click="kfClose()">不使用</view>
+					<view class="comfirm" @click="comfirm()">使用</view>
+				</view>
+			</view>
+		</uni-popup> -->
+		<uni-popup ref="popupYue" type="center">
+			<view class="yue-box">
+				<view class="yue-tit">
+					抢购数量
+				</view>
+				<!-- numberChange购买数量变化   goodsNumberMax最大可购买数 -->
+				<uni-number-box class="step" :isMin="true" :value="goodsNumber" :min="1" :max="goodsNumberMax"
+					@eventChange="numberChange"></uni-number-box>
+				<view class="yue-content">
+					请填写积分数量
+				</view>
+				<view class="comfirm-box">
+					<view class="cancel" @click="quxiao()">取消</view>
+					<view class="comfirm" @click="quire()">确定</view>
 				</view>
 			</view>
-			<view class="table-box">
-				<view class="table-img">
-					<image src="../../static/game/game02.png" mode=""></image>
+		</uni-popup>
+		<!-- <uni-popup ref="popupButton" type="bottom">
+			<view class="zhifu-box">
+				<view class="zhifu-title">
+					请选择支付方式
 				</view>
-				<view class="table-title">
-					<view class="table-top">
-						200
+				<view>
+					<radio-group name="" @change="radioChange">
+						<label class="zhifu-content">
+							<view class="bai">
+								<image src="../../static/game/game04.png" mode=""></image>
+								<text>白积分支付</text>
+							</view>
+							<radio style="transform:scale(0.7); color: #ff0000;" v-model="bai" checked="true" />
+						</label>
+						<label class="zhifu-content">
+							<view class="bai">
+
+
+								<image src="../../static/game/game02.png" mode=""></image>
+								<text>红积分支付</text>
+							</view>
+							<radio style="transform:scale(0.7); color:#ff0000" v-model="hong" />
+						</label>
+						<label class="zhifu-content">
+							<view class="bai">
+								<image src="../../static/game/game05.png" mode=""></image>
+								<text>紫积分支付</text>
+							</view>
+							<radio style="transform:scale(0.7);color: #ff0000;" v-model="zi" />
+						</label>
+					</radio-group>
+				</view>
+				<view class="zhifu-bottom">
+					<view class="zhifu-left">
+						<text>合计:&nbsp;</text><text>{{goodsNumber}}</text>
 					</view>
-					<view class="table-top">
-						红积分
+					<view class="zhifu-right" @click="buy">
+						立即支付
 					</view>
+
 				</view>
 			</view>
-		</view>
-		</view>
+		</uni-popup> -->
+<!-- 		<uni-popup ref="popupPass" type="center">
+			<!-- <view class="yue-box">
+				<view class="yue-tit">
+					请输入交易密码
+				</view>
+				<view class="password">
+					<input type="password" v-model="passWord" focus placeholder="请填写交易密码">
+				</view>
+				<!-- numberChange购买数量变化   goodsNumberMax最大可购买数 -->
+				<!-- <uni-number-box class="step" :isMin="true" :value="goodsNumber" :min="1" :max="goodsNumberMax"
+					@eventChange="numberChange"></uni-number-box> -->
+				<!-- <view class="yue-content">
+					请填写积分数量
+				</view> -->
+				<!-- <view class="comfirm-box">
+					<view class="cancel" @click="quxiaoPass()">取消</view>
+					<view class="comfirm" @click="quirePass(passWord)">确定</view>
+				</view>
+			</view> -->
+	<!-- 	</uni-popup> --> 
 	</view>
 </template>
 
 <script>
-	import prog from '@/components/cu-progress/cu-progress.vue'
+	import {
+		getTime,
+		timeComputed,
+		
+	} from '@/utils/rocessor.js'
+	import {
+		getGameDetail,
+		getPurchase
+	} from '@/api/game.js'
+	import bingProgress from '@/components/bing-progress/bing-progress.vue'
+	import uniNumberBox from '@/components/uni-number-box.vue'
 	export default {
+		components: {
+			uniNumberBox
+		},
 		data() {
 			return {
-				xiaoguaishou:'',
+				index:0,
+				timer: '',
+				hour: {},
+				guaishouList: [], //怪兽详情
+				id: 0, //详情id
+				isGoumai: false, //是否购买
+				passWord: "", //交易密码
+				bai: 0,
+				hong: 0,
+				zi: 0,
+				goodsNumberMax: 1000, //最大可购买数
+				goodsNumber: 0, //购买数量
+				number: 8,
+				bianhua: 0, //变化
+				xiaoguaishou: '',
 				imageList: [{
-						image: "../../static/game/game01.png"
+						image: "../../static/game/game01.png",
+						// color: '#7F69D8'
 					},
 					{
 						image: "../../static/game/reb02.png"
@@ -118,12 +250,142 @@
 				] //小怪兽图片
 			};
 		},
+		computed: {
+			// ...mapState('user', ['hasLogin', 'userInfo']),
+			getJd() {
+				return (this.guaishouList.number / this.guaishouList.money * 1) * 100
+			}
+		},
 		onLoad(option) {
-			this.xiaoguaishou = this.imageList[option.id].image
-			console.log(this.xiaoguaishou,'打印');
+			// this.xiaoguaishou = this.imageList[option.id].image
+			this.uid = option.id
+			this.index = option.index
+			this.getDTime()
+			let obj = this
+			const time = setInterval(function() {
+				obj.bianhua++;
+				if (obj.bianhua == 2) {
+					clearInterval(time)
+				}
+
+			}, 6)
+		},
+		onShow() {
+			if (this.timer) {
+				clearInterval(this.timer)
+			}
 		},
-		methods:{
-			
+		methods: {
+			getDetail(){
+				getGameDetail({	id: this.uid}).then(res=>{
+					this.guaishouList = res.data
+				})
+			},
+			//计算倒计时
+			getDTime() {
+				let obj = this
+				getGameDetail({
+					id: this.uid
+				}).then(res => {
+					this.guaishouList = res.data
+					this.bianhua = 3000
+
+
+
+					//获取结束时间
+					let endTime = res.data.end_time
+					// console.log(endTime, 'this.guaishouList.end_time');
+					//开启倒计时
+					this.timer = setInterval(getShijian, 1000)
+
+					function getShijian() {
+						//获取当前时间
+						// let newTime =new Date()
+						// //时间差
+						// let times = (endTime*1000-newTime)
+						// console.log(times,'times');
+						// let t = parseInt(times / 60 / 60 % 24)
+						// this.hour = t < 10 ? '0' + t : t
+						// let m = parseInt(t / 60 % 60);
+						// this.m = m < 10 ? '0' + m : m;
+						// let s = parseInt(m % 60);
+						// this.s= s < 10 ? '0' + s : s;
+						// console.log(this.hour,this.m,this.s,'getShijian');
+						let da = timeComputed(endTime * 1000)
+						obj.hour = da
+						// console.log(da,'getShijian')
+					}
+
+				})
+
+
+			},
+			radioChange() {},
+			//购买积分
+			buy() {
+				this.$refs.popupButton.close()
+				this.$refs.popupPass.open()
+
+			},
+			//交易密码取消
+			quxiaoPass() {
+				this.$refs.popupPass.close()
+			},
+			//交易密码确认
+			quirePass() {
+				console.log(this.passWord, 'passWord');
+				this.$refs.popupPass.close()
+				this.isGoumai = true
+
+			},
+			//购买数量
+			numberChange(e) {
+				this.goodsNumber = e.number
+				// console.log(this.goodsNumber, 'e');
+				// this.$refs.popupButton.open()
+			},
+			//抢购数量取消
+			quxiao() {
+				this.$refs.popupYue.close()
+
+
+			},
+			//抢购数量确认
+			quire() {
+				console.log(this.goodsNumber, 'this.goodsNumber');
+				
+				this.$refs.popupYue.close()
+				// this.$refs.popupButton.open()
+				//投注
+				getPurchase({
+					//众筹场次id
+					id:this.uid,
+					price:this.goodsNumber
+					//投注额度
+				}).then(res=>{
+					console.log(res,'投注信息');
+					this.getDetail()
+				})
+				
+			},
+			//预约界面使用
+			comfirm() {
+				this.$refs.popup.close()
+				this.$refs.popupYue.open()
+			},
+			//预约界面不使用
+			kfClose() {
+				this.$refs.popup.close()
+			},
+
+			//点击预约
+			yue() {
+				console.log('asda');
+				this.$refs.popupYue.open()
+				
+				
+			}
+
 		}
 	}
 </script>
@@ -135,6 +397,12 @@
 		height: 100%;
 		padding: 0;
 		margin: 0;
+
+	}
+
+	.popup {
+		width: 100rpx;
+		height: 100rpx;
 	}
 
 	.game-top-bg {
@@ -186,11 +454,11 @@
 
 		.xl-t {
 			margin-top: 10rpx;
-			width: 474rpx;
-			height: 31rpx;
-			background: #A38CF4;
-			border: 3rpx solid #FFFFFF;
-			border-radius: 13rpx;
+			// width: 474rpx;
+			// height: 31rpx;
+			// background: #A38CF4;
+			// border: 3rpx solid #FFFFFF;
+			// border-radius: 13rpx;
 		}
 	}
 
@@ -270,7 +538,25 @@
 		box-shadow: 0px 0px 20rpx 0rpx rgba(50, 50, 52, 0.06);
 		border-radius: 20rpx;
 		position: relative;
-		.column{
+
+		.aa {
+			width: 685rpx;
+			top: 152rpx;
+			position: absolute;
+			height: 2rpx;
+			background: #7F69D8;
+		}
+
+		.bb {
+			width: 2rpx;
+			height: 305rpx;
+			background: #7F69D8;
+			margin-left: 343rpx;
+			top: 0;
+			position: absolute;
+		}
+
+		.column {
 			display: flex;
 			justify-content: space-between;
 		}
@@ -291,7 +577,7 @@
 			}
 
 			.table-title {
-				
+
 				margin-left: 30rpx;
 				display: flex;
 				flex-direction: column;
@@ -307,4 +593,146 @@
 			;
 		}
 	}
+
+	.yue-box {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: space-around;
+
+
+		width: 582rpx;
+		height: 377rpx;
+		background: #FFFFFF;
+		border-radius: 20rpx;
+
+		.yue-tit {
+			align-items: center;
+			font-size: 42rpx;
+			font-weight: 500;
+			color: #0C1732;
+			line-height: 56rpx;
+		}
+
+		.password {
+			text-align: center;
+			align-items: center;
+		}
+
+		.yue-content {
+			font-size: 30rpx;
+			font-weight: 500;
+			color: #0C1732;
+		}
+
+		.comfirm-box {
+			width: 90%;
+			display: flex;
+			justify-content: space-between;
+
+			.cancel {
+				text-align: center;
+				line-height: 78rpx;
+				width: 248rpx;
+				height: 78rpx;
+				border: 2rpx solid #999999;
+				border-radius: 10rpx;
+				font-size: 34rpx;
+				font-weight: 500;
+				color: #333333;
+			}
+
+			.comfirm {
+				text-align: center;
+				width: 248rpx;
+				height: 78rpx;
+				background: #FF5454;
+				border-radius: 10rpx;
+				font-size: 34rpx;
+				font-weight: 500;
+				color: #FFFFFF;
+				line-height: 78rpx;
+			}
+		}
+	}
+
+	.zhifu-box {
+		padding: 25rpx 0 0 25rpx;
+		width: 750rpx;
+		height: 495rpx;
+		background: #FFFFFF;
+		border-radius: 10rpx 10rpx 0rpx 0rpx;
+
+		.zhifu-title {
+			display: flex;
+			flex-direction: left;
+			font-size: 28rpx;
+			font-weight: bold;
+			color: #333333;
+		}
+
+		.zhifu-content {
+			display: flex;
+			justify-content: space-between;
+
+			.bai {
+				margin: 30rpx 0;
+				display: flex;
+
+				align-items: center;
+
+				image {
+					width: 45rpx;
+					height: 45rpx;
+				}
+
+				text {
+					margin-left: 20rpx;
+					font-size: 28rpx;
+					font-weight: 400;
+					color: #3F454B;
+				}
+			}
+		}
+
+		.zhifu-bottom {
+			width: 750rpx;
+			position: absolute;
+			bottom: 0;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			.zhifu-left {
+				display: flex;
+				align-items: center;
+
+				text:nth-child(1) {
+					font-size: 28rpx;
+					font-weight: 400;
+					color: #3F454B;
+				}
+
+				text {
+					font-size: 36rpx;
+					font-family: PingFang SC;
+					font-weight: bold;
+					color: #FF4C4C;
+					line-height: 55px;
+				}
+			}
+
+			.zhifu-right {
+				line-height: 98rpx;
+				text-align: center;
+				width: 360rpx;
+				height: 98rpx;
+				background: #FF4C4C;
+				font-size: 32rpx;
+				font-weight: bold;
+				color: #FFFFFF;
+			}
+		}
+
+	}
 </style>

store/index.js

@@ -12,7 +12,7 @@ Vue.use(Vuex)
 const store = new Vuex.Store({
 	state: {
 		// baseURL:"http://yrh.liuniu946.com",//'http://eb.shuibo.net',//请求地址配置 
-		baseURL:'https://xl.liuniu946.com',//请求地址配置 
+		baseURL:'http://xhg.frp.liuniu946.com',//请求地址配置 
 		// baseURL:'http://lnpt.frp.liuniu946.com/',//请求地址配置 
 		urlFile:'/index',//项目部署所在文件夹
 		userInfo: {}, //登录信息