fish_program/pages/index/index.vue

<template>
		<view class="content">
			<view class="text" @click="textButton">
				测试
			</view>
			<view class="rotation">
				<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" >
					<swiper-item  v-for="(index,item) in image" :key="item">
						<view class="swiper-item">
					
						{{index}}</view>
					</swiper-item>
					<!-- <swiper-item>
						<view class="swiper-item">图片2</view>
					</swiper-item> -->
				</swiper>
				<!-- 轮播图 -->
			</view>
			<view class="tag">
				<text class="tag-title">{{name}}</text>
				<view class="tag-text">{{description}}</view>
			</view>
			<!-- 预约列表 -->
			<view class="reserve-list">
				<view class="list-title">
					<view type="default" class="list-left" :class="{active:current==index}" :data-current="0" @tap="tabChange">南塘私人定制区</view>
					<view type="default" class="list-left" :class="{active:current==index}" :data-current="1" @tap="tabChange">北塘主场</view>
				</view>
				<swiper @change="swiperChange" :current="current" class="sorth" style="height: 510rpx">
					<swiper-item  v-for="(list,index) in orderList" :key="index">
						<view class="swiper-item"  >
							<view class="north-li"  v-for="(lists,index1) in list.day_text" :key="index1">
		
								<view class="li-left">
									<view class="north-time">
										{{lists.date}}({{lists.w}})
									</view>
									<text class="ordered">已预约：</text><text class="ordered-num">{{list.pid}}</text>
									<text class="site">总坐席：</text><text class="site-num">{{list.number}}</text>
								</view>
								<view class="li-middle">
									￥{{list.money}}
								</view>
								<view class="li-right">
									<button class="li-order" @click="orderSeat(lists,list)">预约</button>
								</view>
								
							</view>
						
					     </view>
					</swiper-item>

				</swiper>
			</view>
		   <!--  垂钓园简介 -->
		   <view class="introduce">
		   	  <view class="introduce-title">
		   	  	~~盛和垂钓园简介~~
		   	  </view>
			  <view class="introduce-del">
				  <text>
					  🐠🐠盛和垂钓园🐠🐠\n&nbsp; &nbsp; &nbsp; &nbsp;郑州市内南三环紫荆山路\n&nbsp; （每周二，四，六放鱼)共3个塘\n\n&nbsp; &nbsp; &nbsp;🐠 主场（北塘0.7 亩）🐠\n&nbsp; 7月11号周六投放狂口鲤鱼1500斤 （前一天下午五点放鱼过称，欢迎钓友监督)25人以上加放标鱼10条（50元代金券）限杆3.9米钓位30个，提前转账200元当天220，定金转账为准。\n主场结束溜鱼收费100到晚上11点半结束作钓。第二天溜鱼6点半开始60元随来随钓8小时，下午4点半结束。\n&nbsp; &nbsp; &nbsp; &nbsp; 上场坑冠130斤👏👏👏\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;\n&nbsp; &nbsp;🐠私人定制（南塘0.5亩）🐠\n&nbsp; &nbsp; &nbsp;上场私人订制因天气原因全部改签，封塘未动，7月11号周六继续放鱼1000斤，钓费不变，提前转账400现场450，抓住机会就10个位置想过瘾赶紧报名。 限杆3.9米&nbsp; &nbsp; &nbsp; &nbsp;\n&nbsp; &nbsp; &nbsp;\n\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;🐠&nbsp; &nbsp; 休闲塘&nbsp; &nbsp; 🐠\n现已开塘，底鱼鲤鱼2500斤左右，6-15斤草鱼500斤，10-15斤青鱼400斤，收费100元8小时， 早上6点30-23点30分，随来随钓（西塘不定时放鱼）限杆4.8米\n\n本塘强制回鱼 ，三元一斤。带回去自己吃10斤以内，需要大量带走提前沟通！鱼价太高，实实在在放鱼，望多理解。挣个回鱼的钱！\n❗本塘禁用胶粘颗粒❗禁止串窝，蹭窝\n❗禁止手打窝&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;❗禁止各种坏水小药\n❗禁止一切红虫活诱❗所有主线加子不能超过60公分，已经发现清护走人\n&nbsp;一旦发现罚款1000元，有小孩看管好 风险自负本塘概不负责 ！ 本塘不改签 不退票 黑坑有险 下杆需谨慎&nbsp; &nbsp;&nbsp;\n&nbsp;本塘规律不多，望遵守\n所有代金券溜鱼无效，仅限下次主场使用。每次仅限使用一张。（有效期一个月）\n本塘提供饭菜，有超市，渔具。有果树采摘，周末可以带家人亲子活动。自助烧烤！&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;\n&nbsp;地址✨紫荆山南路宇通路往西走到头左转向南100米路西，导航（盛和农业即到)电话 18039330363&nbsp; 微信同步\n\n
				  </text>
			  </view>
		   </view>
		   <!-- 技术支持 -->
		   <view class="foot">
		      希梦耐康提供技术支持
		   </view>
		   <!-- 自定义弹出框 -->
		 <view class="Popup" :catchtouchmove="noneEnoughPeople" v-show="isShow" >
		   	<view class="popu-content">
		   		<view class="popu-title">预约订单</view>
				<view class="popu-order">
					{{orderMessage.date}}({{orderMessage.w}})/{{sitePosition}}
				</view>
				<view class="popu-count">
					<view class="popu-count-title">预约位席数：</view>
					<view class="count-button">
						<view class="reduce" @click="reduceOrder" :style="{color:color}">
							-
						</view>
						<input class="num" type="text" :value="count" />
						<view class="add" @click="addOrder">
							+
						</view>
					</view>
				</view>
				<view class="tw-button">
					<view class="left-button" @click="cancelOrder">取消</view>
					<view class="right-button" @click="sureOrder">确定</view>
				</view>
		   	</view>
			  
		</view>
		</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				state: 0,
				current: '0',
				name:"",//垂钓园名称
				description:'',//垂钓园简介
				introduce:"",//鱼塘详细介绍
				image:"",//轮播图片
				orderList:"",//预约列表
				orderName:"",//预约列表名称
				isShow:false,//弹出层是否出现
				count:1,//预约数量
				color:"black",
			    orderMessage:'',//预约信息
				sitePosition:'',//预约位置信息（南塘北塘）
				position:'',
			}
		},
		onLoad() {
		

			// 微信登陆接口并获取token
		   wx.login({
			  success(res){
				  console.log(res,"这是登录接口测试")
				  if(res.code){
					  console.log('mead')
					  wx.request({
						  url:"https://yutang.web.ximengnaikang.com/api/login",
						  method:'POST',
						  data:{
							  code:res.code
						  },
						  header:{
							  'content-type':'application/json'
						  },
						  success:function(res){
							  console.log(res,"这是用户id测试")
							 getApp().globalData.token=res.data.data.authorize			  
						  }
					  })
				  }
			  } 
		   })
		  
		   // 首页、预约列表等信息调用
         wx.request({
			 url: 'https://yutang.web.ximengnaikang.com/api/company',
			 method:'GET',
			 header: {
			     'content-type': 'application/json' ,// 默认值
				 // 'a': ''
			   },
			   success:(res)=>{
				var  record= res.data.data.company
				this.name= record.name
				this.description=record.description
				this.introduce=record.body
				this.image=record.cover
				this.orderList=res.data.data.seats
				this.orderName=record.tabs
			   	console.log(this.orderList,'这是调用get')
			   }
		 })
		 // 用户信息刷新
		setTimeout(
		
		function(){
			var that=this
			console.log(that.nickName,'这是用户名')
	       wx.request({
	       			 url:'https://yutang.web.ximengnaikang.com/api/syncUserInfo',
	       			 method:'POST',
	       			  header:{
	       				 'content-type':'application/json' ,// 默认值
	       				 'Authorization':getApp().globalData.token,
	       			 },
					 data:{

						"nickName": getApp().globalData.nickName,
						"avatarUrl":getApp().globalData.avatarUrl,
						"gender":1,//性别 0：未知、1：男、2：女
						"province":getApp().globalData.province,
						"city" :getApp().globalData.city,
						"country":getApp().globalData.country,
						
					 },
					 success:function(res){
							 console.log(res,'这是用户信息刷新')
					 }
	       })
		},3000)

		},
		methods: {
			textButton:function(){
				wx.navigateTo({
					url:'../pay/pay'
				})
			},
			tabChange: function(e) {
				var index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.current = index;
			},
			swiperChange: function(e) {
				var index = e.target.current || e.detail.current;
				this.current = index;
			},
			//作为预约
			orderSeat:function(e, aa){
				// console.log(getApp().globalData.token)
				var token=getApp().globalData.token;
			    var that=this;
				console.log(e,'这是点击预约之后的按钮')
				console.log(aa,'这是点击预约之后的按钮1213')
			  //判断用户是否进行授权 
				wx.getSetting({
					success(res){
						console.log(res,"这是用户授权信息")
						if(res.authSetting["scope.userInfo"]){
							console.log("用户已经授权")
							that.isShow=true
							that.orderMessage=e
							that.sitePosition=aa.name
							console.log(that.orderMessage,'这是点击预约之后的按钮3333')
  						}
						else{
							wx.showModal({
								title:'用户授权',
								content:'此功能需要获取您的昵称等公开信息，请到小程序的设置中打开用户权限',
							    cancelText:'下次再说',
							    confirmText:'去授权',
								success(res) {
									if(res.confirm){
										wx.navigateTo({
											url:'../userInfo/userInfo'
										})
										// console.log(res.authSetting["scope.userInfo"],"这是微信是否授权验证")
									}else if(res.cancel){
										
									}
								}

							})
							
						}
						
					}
				})
			},
		//预约数量减少
		reduceOrder:function(){
			
			if(this.count<=1){
				// this.count=1
				this.color="black";
			}
			else{
					
				this.count--;
				console.log(this.color)
			
		
			}
		},
		//预约数量增加
		addOrder:function(){
			this.count++;
			if(this.count>1){
				this.color="#1087e2";
			}
		},
		
			//弹出层消失按钮、取消预约按钮
		cancelOrder:function(){
			this.isShow=false
		},
         //确定预约按钮
		 sureOrder:function(e){
			 var day=this.orderMessage.date
			 var seat_id=this.orderMessage.site_id
			 var number=this.count
			 console.log(day,seat_id,number)
			 wx.request({
				 url:'https://yutang.web.ximengnaikang.com/api/storeOrder',
				 method:'POST',
				 header:{
					 'content-type':'application/json' ,// 默认值
					 'Authorization':getApp().globalData.token,
				 },
				 data:{
					 day:day,
					 seat_id:seat_id,
					 number:number,
				 },
				 success(res) {
					 console.log(res.data.data.no,'这是预约成功发')
				
					getApp().globalData.no=res.data.data.no
		
						wx.requestPayment({
						  timeStamp: res.data.data.timeStamp,
						  nonceStr: res.data.data.nonceStr,
						  package: res.data.data.package,
						  signType: 'MD5',
						  paySign: res.data.data.paySign,
						  success (res) { 
							 
							  console.log(res,"支付成功")
							  wx.navigateTo({
								  url:'../pay/pay',
							  })
						  },
						  fail (err) {
							
							    console.log(res,"支付失败")
								  // console.log(packages,"支付失败")
						
						  }
						})
				 },
				 fail:function(){
			 }
				
			 })
			
			 this.isShow=false
			 // console.log()
		 }
		},
		
	}
</script>

<style>
	page {
	background-color: #f8f7f8;
	}

	.list-left {
		background-color: #007AFF;
	}

	.content {
		position: relative;
	    display: flex;
		 height:100%;
		 
	 	flex-direction: column;
		align-items: center;
		justify-content: center; 
	}
	/* 弹出框样式 */
	.Popup{
		position: fixed;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center; 
		top: 0;
		z-index:400;
		width:100%;
		height:100%;
		background-color:rgba(128,128,128,0.5);
		}
		.popu-content{
			height: 450rpx;
			width: 75%;
			background-color: white;
			opacity: 1;
			border-radius: 10rpx;
		}
		.popu-title{
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 30rpx;
			border-bottom: solid 1rpx #e3e3e3;
		}
			
		.popu-order{
			height: 120rpx;
			padding: 0 14rpx;
			margin: 30rpx 30rpx;
			background-color: #C0C0C0;
			color: red;
			font-weight: 540;
			line-height: 55rpx;
			text-align: center;
			font-size: 38rpx;
		}
		.popu-count{
			display: flex;
			height: 80rpx;
			line-height: 80rpx;
			margin: 30rpx;
		}
		.popu-count-title{
			flex: 1;
		}
		.count-button{
			flex: 1;
			/* float: ; */
	/* 		height: 140rpx;
			width: 300rpx; */
			/* background-color: #007AFF; */
		}
		.reduce{
			margin-left:60rpx;
			border-top-left-radius: 10rpx;
			border-bottom-left-radius: 10rpx;
			line-height: 60rpx;
			font-size:50rpx;
		}
		.add{
			border-top-right-radius: 10rpx;
			border-bottom-right-radius: 10rpx;
			line-height: 60rpx;
			font-size:40rpx;
			color: #1087e2;
		}
		.reduce,.add,.num{
			margin-top: 10rpx;
			width: 60rpx;
			height: 60rpx;
			display: inline-block;
			vertical-align: top;
			text-align: center;
			
			border: solid 1px #C0C0C0;
		}
		.tw-button{
			display: flex;
			height: 80rpx;
			text-align: center;
			border-top: solid 1px  #e3e3e3;
		}
		.left-button,.right-button{
			flex: 1;
			text-align: center;
			line-height: 80rpx;
		}
		.right-button{
			color: #1087e2;
		}
		.left-button{
			border-right: solid 1px #e3e3e3;
		}
	.rotation {
		height: 280rpx;
		width: 100%;
		background-color: #55ffff;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height:600rpx;
	}

	.tag {
		padding: 5px 10px;
		height: 200rpx;
		width: 90%;
		background-color: white;
		border-radius: 12rpx;
		margin-top: -50rpx;
	}

	.tag-title {
		font-size: 28px;
		font-weight: 600;
	}

	.tag-text {
		font-size: 16px;
		margin-top: 10rpx;
	}

	.reserve-list {
		margin-top: 30rpx;
		background-color: white;
		height: 510rpx;
		width: 100%;
	}

	.list-left,
	.list-right {
		width: 50%;
		display: inline-block;
		border: none;
		height: 50px;
		line-height: 50px;
		text-align: center;
		border-bottom: #F1F1F1 solid 1rpx;
	}

	.north-li {
		display: flex;
		border-bottom: solid 1rpx #C0C0C0;
		padding: 20rpx 0;
		/* 		background-color: #007AFF; */
		height: 100rpx;
	}

	.li-left {
		flex: 0 0 50%;
		text-align: center;
		border-right: #C0C0C0 dashed 1rpx;
	}

	.li-right {
		flex: 1;
		text-align: center;
	}

	.li-middle {
		flex: 1;
		line-height: 100rpx;
		color: #f50004;
		text-align: center;
		font-size: 36rpx;
		border-right: #C0C0C0 dashed 1rpx;
	}

	.li-order {
		margin-top: 20rpx;
		height: 60rpx;
		width: 150rpx;
		background-color: #f50004;
		color: white;
		line-height: 60rpx;
		font-size: 16px;
		border-radius: 5rpx;
	}

	.north-time {
		height: 60rpx;
		/* line-height: 70rpx; */

		font-size: 35rpx;
		text-align: center;
	}

	.ordered-num {
		margin-right: 20px;
	}

	.site-num,
	.ordered-num {
		color: #f50004;
	}

	.ordered,
	.site {
		color: #999999;
	}

	.ordered,
	.site,
	.site-num,
	.ordered-num { 
		font-size: 28rpx;

	}
	.introduce{
		margin-top:40rpx;
		background-color: white;
		width: 100%;
		padding-bottom: 50rpx;
	}
	.introduce-title{
		height: 80rpx;
		line-height: 80rpx;
		font-size: 40rpx;
		/* font-weight: 600; */
		text-align: center;
		border-bottom:  #999999 dashed  2rpx;
	}
	.foot{
		width: 100%;
		font-size: 30rpx;
		color: #999999;
		text-align: center;
		margin-top: 100rpx;
		padding-bottom: 40rpx;
	}
	.introduce-del{
		padding:40rpx 40rpx;
		font-size: 28rpx;
		color: #4a4a4a;
		}
</style>