组合下单页面开发

main.js

@@ -8,7 +8,7 @@ import commonjs from 'common/common.js'
 
 Vue.prototype.$commonjs = commonjs
 Vue.prototype.$request = request
-Vue.prototype.$wxurl = 'https://lx.pangdly.com/#/'
+Vue.prototype.$wxurl = 'https://wx.pangdly.com/#/'
 Vue.prototype.imageError ='@/static/img/common/pangdingLogo.png'
 Vue.use(uView)
 uni.$u.config.unit = 'rpx'

pages/scenic/scenicCombiOrder/scenicCombiOrder.vue

 <template>
 	<view class="orderBox">
 		<view class="head"> </view>
-		<view class="middle" v-for="(item,index) in productList" :key='item.id'>
-			<view class="middle-top">
+		<view class="middle">
+			<view class="list" v-for="(item,index) in productList" :key='item.id'>
+				<view class="list-top">
 					<!-- --------------------------------------------产品信息部分------------------------------------- -->
-				<view class="middle-Product">
+					<view class="list-Product">
 						<view class="merchantName">
 							<text class="title-text">
 								{{ item.merchantName || '' }}
@@ -28,7 +29,7 @@
 						</view>
 					</view>
 					<!--需要排队并且站点数大于1-->
-				<view class="middle-place" @click="openArea(index)" v-if="item.isFetch ==1&& item.productAreaList.length >1&&item.areaUp">
+					<view class="list-place" @click="openArea(index)" v-if="item.isFetch ==1&& item.productAreaList.length >1&&item.areaUp">
 						<view> 出发站点 </view>
 					
 						<view>
@@ -40,7 +41,7 @@
 						</view>
 					</view>
 					<!--需要排队并且为一个站点-->
-				<!-- <view class="middle-place" v-if="item.isFetch == 1 && item.productAreaList.length == 1 &&item.areaUp" @click="getSortInfor()">
+					<!-- <view class="list-place" v-if="item.isFetch == 1 && item.productAreaList.length == 1 &&item.areaUp" @click="getSortInfor()">
 						<view> 获取排队信息 </view>
 					
 						<view>
@@ -52,10 +53,10 @@
 						</view>
 					</view> -->
 					
-				<view class="middle-Date">
+					<view class="list-Date">
 						<view class="title-text">游玩日期</view>
-					<view class="middle-Datelist">
-						<scroll-view class="date-content" scroll-x="true" :scroll-left="dateScroll" v-if="item.priceStockList&&item.priceStockList.length > 0">
+						<view class="list-Datelist">
+							<scroll-view class="date-content" scroll-x="true" :scroll-left="item.dateScroll" v-if="item.priceStockList&&item.priceStockList.length > 0">
 								<view class="date-list" v-for="(item2,index2) of item.priceStockList" :class="{ on:item.dateActive == index2 }" @click="dateChoose(item,item2,index2)" :key="index2">
 									<view v-if="item2.week">
 										<text v-if="item2.week != '今天' && item2.week != '明天' && item2.week != '后天'">周</text>
@@ -84,18 +85,22 @@
 						</view>
 					</view>
 					
-				<view class="middle-time" v-if="item.productType == 3">
+					<view class="list-time" v-if="item.productType == 3">
 						<view class="title-text"> 场次 </view>
-					<view class="middle-timelist">
-						<scroll-view class="time-content" scroll-x="true" :scroll-left="timeScroll" v-if="item.timeList&&item.timeList.length> 0">
+						<view class="list-timelist">
+							<scroll-view class="time-content" scroll-x="true" :scroll-left="item.timeScroll" v-if="item.timeList&&item.timeList.length> 0">
 								<view class="time-list" v-for="(item2,index2) of item.timeList" @click="chooseTime(item,item2,index2)" :class="{ on:item.timeActive == index2 }" :key="index2">
 									<view>
 										{{ item2.startPlanTime ? item2.startPlanTime.substr(0, 5) : '' }}
-									<text v-if="item2.endPlanTime">-</text>
-									{{ item2.endPlanTime ? item2.endPlanTime.substr(0, 5) : '' }}
+										<text v-if="!item2.saleOnlyShowFromDate">
+											-{{ item2.endPlanTime ? item2.endPlanTime.substr(0, 5) : '' }}
+										</text>
+									</view>
+									<view> 
+										<text v-if="item2.copyLast!='余票充足'&&item2.copyLast!='售罄'">剩余：</text>
+										{{ item2.copyLast }} 
 										</view>
-								<view> 剩余：{{ item2.last }} </view>
-								<view v-if="item.timeActive == index" class="date-icon">
+									<view v-if="item.timeActive == index2" class="date-icon">
 										<u-icon name="checkmark" color="#ffffff"></u-icon>
 									</view>
 								</view>
@@ -112,10 +117,10 @@
 						</view>
 						
 					</view>
-				<view class="middle-divider">
+					<view class="list-divider">
 						
 					</view>
-				<view class="middle-Number">
+					<view class="list-Number">
 						<view class="title-text"> 购买数量 </view>
 						<view>
 						 <u-number-box v-model="item.buyNum" @change='buyNumChange'>
@@ -129,7 +134,7 @@
 							</u-number-box>
 						</view>
 					</view>
-				<view class=" middle-coupon" v-if="couponData.length>0"  @click="showCoupon()">
+					<view class="list-coupon" v-if="couponData.length>0"  @click="showCoupon()">
 							<view>
 								券
 							</view>
@@ -166,12 +171,12 @@
 							<u-icon name="arrow-right" color="#3688FF"></u-icon>
 					</view>
 				</view>
-			<view class="middle-divider">
+				<view class="list-divider">
 					
 				</view>
 				<!-- ---------------------------------------------游客信息-------------------------------------------- -->
-			<view class="middle-bottom" v-if="item.tripTemplateFlag != 2">
-				<view class="middle-visitor">
+				<view class="list-bottom" v-if="item.tripTemplateFlag != 2">
+					<view class="list-visitor">
 						<view class="visitorTitle">
 							<text class="title-text"> 用户信息 </text>
 							<text>
@@ -224,11 +229,6 @@
 							</view>
 						</view>
 					</view>
-
-				<view class="middle-phone" v-if="showTelephone">
-					<text> 联系电话： </text>
-					<input type="number" maxlength="11" placeholder="请输入联系电话" v-model.trim="ticketPhone" />
-				</view>
 				</view>
 				<!-- ---------------------------------------------产品押金部分---------------------------------------- -->
 				<view class="productDeposit" v-if="item.deposit">
@@ -241,6 +241,11 @@
 				</view>
 				
 			</view>
+			<view class="telephone" v-if="showTelephone">
+				<text> 联系电话： </text>
+				<input type="number" maxlength="11" placeholder="请输入联系电话" v-model.trim="ticketPhone" />
+			</view>
+		</view>
 		
 		<view class="bottom">
 			<view class="bottom-left">
@@ -261,7 +266,7 @@
 				</view>
 			</view>
 		</view>
-		<calendar ref="calendar" @dateConfig="dateConfig" :dateList="dateList" v-show="dateList.length > 0"></calendar>
+		<calendar ref="calendar" @dateConfig="dateConfig" :dateList="chooseDateList" v-show="chooseDateList.length > 0"></calendar>
 		<buyKnow ref="buyKnow" :buyKnowData="buyKnowData"></buyKnow>
 		<detail
 			ref="detail"
@@ -281,7 +286,7 @@
 			:sortArr="sortArr"
 			:defaultAreaCode="defaultAreaCode"
 		></chooseArea>
-		<times ref="times" :chooseTimeList="chooseTimeList" @timeConfig="timeConfig" :chooseTimeData="chooseTimeData" :timeActive="timeActive"></times>
+		<times ref="times" :chooseTimeList="chooseTimeList" @timeConfig="timeConfig" :timeActive="timeActive"></times>
 		<editContacts ref="editContacts" :editContact="editContact" :contactTotal="contactTotal"></editContacts>
 		<contactList
 			ref="contactList"
@@ -313,7 +318,7 @@
 					<text class="sortPoptext">{{ sortIfo.sortTotalCapacity }}</text>
 				</view>
 				<view style="margin-top: 40rpx; text-align: center" @click="sortInforPop = false">
-					<text class="middle-btn">确定</text>
+					<text class="list-btn">确定</text>
 				</view>
 			</view>
 		</u-popup> -->
@@ -365,7 +370,6 @@ export default {
       productDepositTotal: 0, //产品总押金
       docQuery: '', //元素变量
       payBackground: '', //支付按钮背景颜色
-      dateScroll: '', //日期滚动值
       timeScroll: '' ,//时间滚动值
       openid:uni.getStorageSync('openid') || '',//openid
       couponData:[], //所有劵数据
@@ -373,9 +377,9 @@ export default {
       ableConpon: '', //没有可用优惠券时，达到一定条件可用，显示达到的条件
       orderStatus:'',//上下架状态，任何一个产品状态为下架，该状态为下架
       chooseTimeList:[],//选中产品时间列表
-      chooseTimeData: '', //选中的时间传给子组件
       moreDateIndex:0,//点击的更多日期下标
-      dateList:[],//点击更多日期时对应的日期列表
+      moreTimeIndex:0,//点击的更多时间下标
+      chooseDateList:[],//点击更多日期时对应的日期列表
       showTelephone:true,//用于判断是否显示输入联系人电话号码
       areaIndex:0,//选择站点时对应的产品下标
       contactTotal: [], //所有联系人列表
@@ -492,7 +496,7 @@ export default {
       // }
       this.$refs.calendar.setDefaultDate(this.productList[index].chooseDate)//日历组件选中日期
       this.moreDateIndex=index
-      this.dateList=this.productList[index].priceStockList
+      this.chooseDateList=this.productList[index].priceStockList
       this.$refs.calendar.showPop = true
     },
     //---日期选择---已改
@@ -505,7 +509,6 @@ export default {
       this.$refs.calendar.setDefaultDate(item.chooseDate)//日历组件选中日期
       item.endDate=item2.endTime//开始日期
       item.startDate=item2.startTime//结束日期
-      this.chooseTimeData=''//清除之前选中的时间
       if(item.productType==3){
         //productType=3为场次票
 			  item.cruisePlanId=''
@@ -517,19 +520,19 @@ export default {
       //解决点击日期无反应的情况
       this.$forceUpdate()
     },
-    //---日历确认事件---还未改完
+    //---日历确认事件
     dateConfig(data) {
-      let index=this.moreDateIndex
-      let index2=this.productList[index].priceStockList.findIndex(item=>{
+      let index2=chooseDateList.findIndex(item=>{
         return item.startTime.substr(0,10)==data
       })
-      let item=this.productList[index]
+      let item=this.productList[this.moreDateIndex]
       let item2=item.priceStockList[index2]
-      this.dateChoose(item,item2,index) //选中确认的日期
-      //下面需要处理
-      // this.docQuery.selectAll('.date-list').boundingClientRect(data => {
-      //   this.dateScroll = (data[index].width + 4) * index
-      // }).exec()
+      this.dateChoose(item,item2,index2) //选中确认的日期
+      let width=0
+      this.docQuery.select('.date-list').boundingClientRect(data => { 
+        width = data.width
+      }).exec()
+      item.dateScroll=(width+6)*index2
     },
     //---展示更多时间---已改好
     showTime(item,index) {
@@ -542,31 +545,31 @@ export default {
       }
       this.$refs.times.showPop = true
     },
-    //---时间选择---已改好，数据更新需要测试
-    chooseTime(item,item2,index) {
+    //---时间选择---已改好
+    chooseTime(item,item2,index2) {
       if(item2.copyLast!='售罄'){
-			  item.timeActive=index
+			  item.timeActive=index2
 			  item.cruisePlanId=item2.cruisePlanId//获取班次Id
-			  this.chooseTimeData=item2.startPlanTime
 			  item.maxBookNum=Math.min(item.maxBookNum,item2.last)
 			  //如果为场次票,开始时间为班次时间的开始时间，结束时间为班次时间的结束时间，班次时间的结束时间为空时，结束时间为班次时间的开始时间
 			  item.startPlayTime=item2.startPlanTime
 			  item.endPlayTime=item2.endPlanTime||item2.startPlanTime
-			  // this.$forceUpdate()
+        //解决时间下标未及时选中的问题
+			  this.$forceUpdate()
       }
     },
     //---时间确认事件
-    timeConfig(data) {
-      let index = this.timeList.findIndex(item => {
-        return item.startPlanTime == data
-      })
-      if (index > -1) {
-        //子组件点击确认之后有选择的时间
-        this.chooseTime(index) //选中确认的日期
-        this.docQuery.selectAll('.time-list').boundingClientRect(data => {
-          this.timeScroll = (data[index].width + 4) * index
+    timeConfig(index2) {
+      let item=this.productList[this.moreTimeIndex]
+      let item2=this.chooseTimeList[index2]
+      this.chooseTime(item,item2,index2)
+      //由于没有数据需要测试
+      let width=0
+      this.docQuery.select('.time-list').boundingClientRect(data => { 
+        width = data.width
       }).exec()
-      }
+      item.timeScroll=(width+6)*index2
+      
     },
     //---获取点击的编辑联系人信息，传给编辑联系人组件
     getEditContact(data) {
@@ -1273,11 +1276,14 @@ export default {
 	min-height: 100%;
 	background: #f5f5f5;
 }
-.middle {
+.middle{
 	position: relative;
 	top: -100rpx;
-	padding: 30rpx 20rpx;
 	background: #ffffff;
+	padding:0 20rpx 30rpx 20rpx;
+}
+.list{
+	padding-top: 30rpx;	
 }
 .title-text{
 	font-size: 32rpx;
@@ -1308,23 +1314,23 @@ export default {
 .buyKnow view:nth-child(2) {
 	display: flex;
 }
-.middle-place {
+.list-place {
 	height: 100rpx;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 }
-.middle-place view:nth-child(2) {
+.list-place view:nth-child(2) {
 	flex: 1;
 	margin-left: 20rpx;
 	color: $theme;
 	font-size: 28rpx;
 	font-weight: bolder;
 }
-.middle-Date{
+.list-Date{
 	margin-top: 40rpx;
 }
-.middle-Datelist {
+.list-Datelist {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -1387,10 +1393,10 @@ export default {
 .date-more-content {
 	margin-right:8rpx;
 }
-.middle-time{
+.list-time{
 	margin-top: 40rpx;
 }
-.middle-timelist {
+.list-timelist {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -1439,12 +1445,12 @@ export default {
 	flex: 1;
 	font-weight: bolder;
 }
-.middle-divider{
+.list-divider{
 	height: 2rpx;
 	background:$divider;
 	margin: 40rpx 0;
 }
-.middle-Number {
+.list-Number {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -1473,13 +1479,13 @@ export default {
 	justify-content: center;
 	align-items: center;
 }
-.middle-coupon{
+.list-coupon{
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 	padding:30rpx 0;
 }
-.middle-coupon view:first-child{
+.list-coupon view:first-child{
 	width: 36rpx;
 	height: 36rpx;
 	background: $theme;
@@ -1488,18 +1494,18 @@ export default {
 	line-height:32rpx;
 	border-radius:4rpx;
 }
-.middle-coupon view:nth-child(2){
+.list-coupon view:nth-child(2){
 	flex: 1;
 	margin-left: 10rpx;
 }
-.middle-coupon view:nth-child(3){
+.list-coupon view:nth-child(3){
 	display: flex;
 	color: $theme;
 	font-weight: bold;
 }
 
 /*中间下面部分*/
-.middle-visitor {
+.list-visitor {
 	padding-bottom: 40rpx;
 	border-bottom: 1px solid $divider;
 }
@@ -1578,12 +1584,13 @@ export default {
 .edit-list view:nth-child(3) {
 	flex: 1;
 }
-.middle-phone {
+.telephone {
 	margin-top: 30rpx;
 	display: flex;
 	align-items: center;
+	font-weight: bold;
 }
-.middle-phone input {
+.telephone input {
 	flex: 1;
 }
 /*押金部分*/
@@ -1609,8 +1616,7 @@ export default {
 	max-width: 750rpx;
 	z-index: 10;
 	padding: 0 24rpx 0 40rpx;
-	box-sizing: border-box;
-	box-shadow: 0 0 3rpx #666666;
+	box-shadow: 0px 4px 12px rgba(0,0,0,0.16)
 }
 .bottom-left > text:first-child {
 	font-size: 28rpx;

pages/scenic/scenicComponents/times.vue

 <template>
-	<u-popup :show="showPop" :round="20"  @close="showPop=false" closeable>
+	<u-popup :show="showPop" :round="20"  @close="confirm()" closeable>
 		<view class="son-wrap">
 			<view class="time-title">
 				时间选择
@@ -14,15 +14,17 @@
 						:key="index" v-if="item.last>0">
 						<view>				
 							{{item.startPlanTime?item.startPlanTime.substr(0,5):""}}
-							<text v-if="item.endPlanTime">-</text>
-							{{item.endPlanTime?item.endPlanTime.substr(0,5):""}}
+							<text v-if="!item.saleOnlyShowFromDate">
+								-{{item.endPlanTime?item.endPlanTime.substr(0,5):""}}
+							</text>
 						</view>
 						<view>
-							剩余：{{item.last}}
+							<text v-if="item.copyLast!='余票充足'&&item.copyLast!='售罄'">剩余：</text> 
+							{{item.copyLast}}
 						</view>
 					</view>
 				</view>				
-				<view style="padding: 0.5rem 0rem;color: #FF0000;" v-else>
+				<view style="padding:50rpx 0;color: #FF0000;" v-else>
 					空空如也...
 				</view>
 				<view class="time-sure">
@@ -37,7 +39,7 @@
 
 <script>
 export default {
-  props: ['chooseTimeList', 'chooseTimeData', 'timeActive'],
+  props: ['chooseTimeList', 'timeActive'],
   watch: {
     timeActive: { //父组件选中的下标
       handler(newValue, oldValue) {
@@ -53,25 +55,20 @@ export default {
     return {
       showPop: false, //控制该组件显示隐藏
       active: 10000, //默认不选中
-      times: '', //时间
-      timeNumber: '', //当前时间转化为数字
     }
   },
   methods: {		
     //---时间选择
     chooseTime(i) { 
       this.active = i
-      this.times = this.chooseTimeList[i].startPlanTime
     },
     //---时间确认事件
-    confirm(date) { 
+    confirm() { 
       this.showPop = false
-      this.$emit('timeConfig', this.times)
-    },
-  },
-  mounted() {
-    let times = new Date().Format('yyyy-MM-dd hh:mm:ss')
-    this.timeNumber = parseInt(this.$commonjs.changeTime(times))
+      if(this.active!=10000){
+        this.$emit('timeConfig', this.active)
+      }
+    }
   }
 }
 </script>

pages/scenic/scenicOrder/scenicOrder.vue

@@ -91,13 +91,13 @@
 							<view class="time-list" v-for="(item, index) of timeList" @click="chooseTime(index)" :class="{ on: timeActive == index }" :key="index">
 								<view>
 									{{ item.startPlanTime ? item.startPlanTime.substr(0, 5) : '' }}
-									<text v-if="item.endPlanTime&&!item.saleOnlyShowFromDate">
+									<text v-if="!item.saleOnlyShowFromDate">
 										-{{ item.endPlanTime ? item.endPlanTime.substr(0, 5) : '' }}
 									</text>
 								</view>
 								<view> 
 									<text v-if="item.copyLast!='余票充足'&&item.copyLast!='售罄'">剩余：</text> 
-									{{ item.last }} 
+									{{ item.copyLast }} 
 								</view>
 								<view v-if="timeActive == index" class="date-icon">
 									<u-icon name="checkmark" color="#ffffff"></u-icon>
@@ -329,7 +329,7 @@
 			:sortArr="sortArr"
 			:defaultAreaCode="defaultAreaCode"
 		></chooseArea>
-		<times ref="times" :chooseTimeList="timeList" @timeConfig="timeConfig" :chooseTimeData="chooseTimeData" :timeActive="timeActive"></times>
+		<times ref="times" :chooseTimeList="timeList" @timeConfig="timeConfig" :timeActive="timeActive"></times>
 		<editContacts ref="editContacts" :editContact="editContact" :contactTotal="contactTotal"></editContacts>
 		<contactList
 			ref="contactList"
@@ -420,7 +420,6 @@ export default {
       chooseContact: [], //选中的游客信息列表
       contactNum: 1, //需要选择几位联系人数量
       cruisePlanId: '', //班次Id
-      chooseTimeData: '', //选中的时间传给子组件
       timeNumber: '', //当前时间转化为数字
       startDate: '', //开始日期
       endDate: '', //结束日期
@@ -589,7 +588,7 @@ export default {
       })
       this.dateChoose(index) //选中确认的日期
       this.docQuery.selectAll('.date-list').boundingClientRect(data => {
-        this.dateScroll = (data[index].width + 4) * index
+        this.dateScroll = (data[index].width + 6) * index
       }).exec()
     },
     //---展示更多时间
@@ -601,7 +600,6 @@ export default {
       if(this.timeList[i].copyLast!='售罄'){
 			  this.timeActive = i
 			  this.cruisePlanId = this.timeList[i].cruisePlanId //获取班次Id
-			  this.chooseTimeData = this.timeList[i].startPlanTime
 			  this.maxBookNum = Math.min(this.timeList[i].last, this.productIfo.maxBookNum) //获取剩余库存
 			  //如果为班次票,开始时间为班次时间的开始时间，结束时间为班次时间的结束时间，班次时间的结束时间为空时，结束时间为班次时间的开始时间
 			  this.startPlayTime = this.timeList[i].startPlanTime
@@ -609,17 +607,11 @@ export default {
       }
     },
     //---时间确认事件
-    timeConfig(data) {
-      let index = this.timeList.findIndex(item => {
-        return item.startPlanTime == data
-      })
-      if (index > -1) {
-        //子组件点击确认之后有选择的时间
+    timeConfig(index) {
       this.chooseTime(index) //选中确认的日期
       this.docQuery.selectAll('.time-list').boundingClientRect(data => {
-          this.timeScroll = (data[index].width + 4) * index
+        this.timeScroll = (data[index].width + 6) * index
       }).exec()
-      }
     },
     //---获取点击的编辑联系人信息，传给编辑联系人组件
     getEditContact(data) {
@@ -1713,8 +1705,7 @@ export default {
 	max-width: 750rpx;
 	z-index: 10;
 	padding: 0 24rpx 0 40rpx;
-	box-sizing: border-box;
-	box-shadow: 0 0 3rpx #666666;
+	box-shadow: 0px 4px 12px rgba(0,0,0,0.16)
 }
 .bottom-left > text:first-child {
 	font-size: 28rpx;