填写订单页面开发

App.vue

@@ -103,33 +103,39 @@ export default {
 	}
 	//小按钮
 	.btn{
-		background:linear-gradient(132deg, #ED400C 0%, #FB862C 100%);
+		background:#3688FF;
 		display: inline-block;
 		color: #FFFFFF;
+		width: 135rpx;
+		height: 70rpx;
+		line-height: 70rpx;
 		font-size:28rpx;
-		border-radius:8rpx;
+		border-radius:16rpx;
 		text-align: center;
-		padding: 16rpx 32rpx;
 	}
 	//中等按钮
 	.middle-btn{
 		background:linear-gradient(132deg, #ED400C 0%, #FB862C 100%);
 		display: inline-block;
 		color: #FFFFFF;
+		width: 180rpx;
+		height: 80rpx;
+		line-height: 80rpx;
 		font-size:32rpx;
-		border-radius:12rpx;
+		border-radius:20rpx;
 		text-align: center;
-		padding: 18rpx 40rpx;
 	}
 	//大按钮
 	.big-btn{
 		background:linear-gradient(132deg, #ED400C 0%, #FB862C 100%);
 		display: inline-block;
 		color: #FFFFFF;
+		width: 240rpx;
+		height: 100rpx;
+		line-height:100rpx;
 		font-size:36rpx;
 		border-radius:28rpx;
 		text-align: center;
-		padding: 20rpx 80rpx;
 		font-weight: bold;
 	}
 

components/buyKnow.vue

@@ -42,7 +42,7 @@
 						¥ <text>{{buyKnowData.sellingPrice}}</text>
 					</text>
 					<view class="bottom-right">
-						<text class="btn" @click="showPop=false">
+						<text class="middle-btn" @click="showPop=false">
 							去预订
 						</text>
 					</view>
@@ -158,9 +158,4 @@ export default {
 	display: flex;
 	align-items: center;
 }
-.btn{
-	padding: 16rpx 48rpx;
-	border-radius: 20rpx;
-	font-size: 32rpx;
-}
 </style>

pages/scenic/scenicComponents/chooseArea.vue

 <template>
 	<view class="area-box">
-		<view class="top" @click="sure()">
+		<view class="top" @click="closeSon()">
 			<view class="top-left">
 				选择（索道）出发站点
 			</view>
 			<view>
-				<u-icon name="close"></u-icon>
+				<u-icon name="close" bold></u-icon>
 			</view>
 		</view>	
+		<!-- 没有默认站点时-->
+		<template v-if="!defaultAreaCode">
+			<view class="bottom">
+				<view class="bottom1">
+					<view>
+						您所在位置距离“{{areaList[distanceIndex].areaName}}”较近
+					</view>
+					
+					<view class="bottom1-choose">
+						建议选择<text>【{{areaList[distanceIndex].areaName}}】</text>
+					</view>
 					
-		<view v-if="defaultAreaCode" class="defaultArea">
+					<view class="bottom1-btn">
+							<text class="btn" @click="chooseArea(item)" v-for="(item,index) of areaList" :key="index">
+								{{item.areaName}}
+							</text>
+					</view>
+				</view>
+				
+				<view class="bottom2">
+					<image src="../static/scenic/chooseArea.jpg" mode="widthFix"></image>
+					<view style="margin-top: 20rpx;">选错站点可导致排队号码无效。</view>
+					<view>若无法确定站点，请向索道工作人员咨询。</view>
+				</view>
+			</view>
+			
+			<view class="pop-wrap" v-show="showPop">
+				<view class="pop-content">
 					<view>
 						<text>
-		  		当前站点：
+							您选择的站点是：
 						</text>
 						
 						<text>
@@ -21,6 +47,7 @@
 						</text>
 					</view>
 					
+					<template v-if="sortIfo">
 						<view>
 							<text>
 								当前排队人数：
@@ -42,7 +69,8 @@
 						
 							</text>
 						</view>
-			<view>
+					</template>
+					<!-- <view>
 						<text>
 							退票规则：
 						</text>
@@ -50,55 +78,38 @@
 						<text>
 							不可退
 						</text>
-			</view>
-		  <view>
-		    <image src="../static/scenic/chooseArea.jpg" mode="widthFix"></image>
-		  </view>
-		
+					</view> -->
 					<view>
-		    <a class="middle-btn" @click="sure()">确定</a>
-		  </view>
-		</view>
-		
-		<template v-else>
-			<view class="bottom">
-				<view class="bottom1">
-					<view>
-						您所在位置距离“{{areaList[distanceIndex].areaName}}”较近
+					  返程时，根据现场情况需重新取号
 					</view>
-					
-					<view class="bottom1-choose">
-						建议选择<text>【{{areaList[distanceIndex].areaName}}】</text>
+					<view v-if="!sortIfo" style="font-size:32rpx;color:#FC6703;">
+						未找到本站信息，请根据现场大屏幕信息合理购票
 					</view>
 					
-					<view class="bottom1-btn">
-							<text class="btn" @click="getSort(item)" v-for="(item,index) of areaList" :key="index">
-								{{item.areaName}}
+					<view style="text-align: center;">
+						<text class="btn" @click="hidePop()" style="color: #555;margin-right: 48rpx;">
+							取消
+						</text>
+						<text class="btn" @click="sure()">
+						确定
 						</text>
 					</view>
 				</view>
 				
-				<view class="bottom2">
-					<image src="../static/scenic/chooseArea.jpg" mode="widthFix"></image>
-					<view style="margin-top: 20rpx;">选错站点可导致排队号码无效。</view>
-					<view>若无法确定站点，请向索道工作人员咨询。</view>
 			</view>
-			</view>
-			
-			<view class="pop-wrap" v-show="showPop">
-				<view class="pop-content">
+		</template>
+		<!-- 有默认站点时 -->
+		<view v-else class="defaultArea">
 		  <view>
 		  	<text>
-							您选择的站点是：
+		  		当前站点：
 		  	</text>
 		
 		  	<text>
 		  		{{areaObj.areaName}}	
-						
 		  	</text>
 		  </view>
 		
-					<template v-if="sortIfo">
 		  <view>
 		  	<text>
 		  		当前排队人数：
@@ -120,8 +131,7 @@
 		
 		  	</text>
 		  </view>
-					</template>
-					<view>
+			<!-- <view>
 				<text>
 					退票规则：
 				</text>
@@ -129,27 +139,15 @@
 				<text>
 					不可退
 				</text>
-					</view>
+			</view> -->
 		  <view>
-					  返程时，根据现场情况需重新取号
-					</view>
-					<view v-if="!sortIfo" style="font-size:32rpx;color: #ff0000;">
-						未找到本站信息，请根据现场大屏幕信息合理购票
+		    <image src="../static/scenic/chooseArea.jpg" mode="widthFix"></image>
 		  </view>
 		
-					<view style="text-align: center;">
-						<text class="middle-btn" @click="hidePop()" style="color: #333;margin-right: 48rpx;">
-							取消
-						</text>
-						<text class="middle-btn" @click="sure()">
-						确定
-						</text>
-					</view>
+		  <view>
+		    <a class="btn" @click="closeSon()">确定</a>
 		  </view>
-				
 		</view>
-		</template>
-	
 	</view>
 	
 </template>
@@ -162,7 +160,7 @@ export default {
       showPop: false, //控制弹窗显示隐藏
       distanceIndex:0, //最小距离下标
       distanceList: [], //所有距离列表
-      sortIfo: '', //排队信息
+      sortIfo: '', //排号信息
       areaObj: {
         areaCode: '', //选中的区域编码
         areaName: '', //选中的区域名字
@@ -180,12 +178,6 @@ export default {
           this.sortIfo.peopleNumber = Math.max(item.sortTotalCapacity-item.showEnd,0)
         }
       })
-			  this.areaList.forEach(item=>{
-			    if(item.areaCode==this.defaultAreaCode){
-			      this.areaObj.areaCode=item.areaCode
-			      this.areaObj.areaName=item.areaName
-			    }
-			  })
       return
     }
     uni.getLocation({
@@ -198,27 +190,23 @@ export default {
     })
   },
   methods: {
+    //---关闭组件
+    closeSon(){
+      this.$parent.closeArea()
+    },
     //---隐藏弹窗
     hidePop() { 
       this.showPop = false
     },
-    //---返回隐藏该组件
-    returnClose() { 
-      this.$parent.closeArea()
-    },
-    //---隐藏该组件
+    //---确定选择站点
     sure() { 
       this.showPop = false
       this.$parent.closeArea()
       this.$emit('areaSure', this.areaObj)
     },
-    //---获取排号信息
-    getSort(item) { 
+    //---选择站点，获取排号信息
+    chooseArea(item) { 
       this.showPop = true
-      let data = {
-        areaCode: item.areaCode,
-        merchantCode: this.merchantCode, //商户code
-      }
       this.areaObj.areaCode = item.areaCode //获取选中的站点code,便于找到返回数据的下标
       this.areaObj.areaName = item.areaName
       this.sortArr.forEach((item)=>{
@@ -255,7 +243,7 @@ export default {
 	  text-align: center;
 	}
 	.defaultArea view text:last-child{
-	  color: #e70313;
+	  color: $red;
 	  font-size:32rpx;
 	  font-weight: bold;
 	}
@@ -266,7 +254,7 @@ export default {
 		right: 0;
 		bottom: 0;
 		z-index:99;
-		background: #f5f5f5;
+		background: #ECF3FE;
 	}
 	.top{
 		display: flex;
@@ -288,7 +276,7 @@ export default {
 	}
 	.bottom1-choose{
 		font-size: 32rpx;
-		color: #ff0000;
+		color: $red;
 		text{
 			font-weight: bold;
 			font-size: 36rpx;
@@ -300,12 +288,12 @@ export default {
 	.bottom2{
 		margin-top: 60rpx;
 		font-size: 32rpx;
-		color: #ff0000;
+		color:$red;
 		text-align: center;
 	}
 	// 弹窗
 	.pop-wrap{
-		background: rgba(0,0,0,0.1);
+		background: rgba(0,0,0,0.4);
 		position: fixed;
 		top: 0;
 		left: 0;
@@ -328,6 +316,6 @@ export default {
 	.pop-content view:not(:last-child) text:last-child{
 		font-size:36rpx;
 		font-weight: bolder;
-		color: #f40000
+		color:$red;
 	}
 </style>

pages/scenic/scenicComponents/contactList.vue

 <template>
-	<u-popup :show="showPop" :round="20" @close="showPop=false" closeable>
-		<view class="son-wrap">
+	<view v-show="showPop">
+		<view class="list-box">
 			<view class="top">
 				<view class="top-num">
+					<text>
 						需填写{{contactNum}}位联系人
+					</text>
+					<view class="top-icon" @click="showPop=false">
+						<u-icon name="close" bold></u-icon>
+					</view>
 				</view>
 				<view @click="showEdit()" class="top-add">
 					<text>
@@ -16,7 +21,7 @@
 				<checkbox-group  @change="chooseContactChange">
 					<view class="bottom-list" v-for="(item,index) of listTotal" :key="item.id">
 						<label>
-							<checkbox :value="JSON.stringify(item)" :checked="item.ifChoose" color="#3688ff"  />
+							<checkbox class="blue" :value="JSON.stringify(item)" :checked="item.ifChoose" color="#3688ff"  />
 							<view class="bottom-content">
 								<view>
 									{{item.name}}
@@ -52,9 +57,11 @@
 					确定
 				</view>
 		</view>
+		
 		</view>
 		<u-modal :show="showModal" @confirm="confirmDele" @cancel="showModal=false" showCancelButton title="确认删除该联系人" ></u-modal>
-	</u-popup>
+	</view>
+	
 </template>
 
 <script>
@@ -83,13 +90,11 @@ export default {
   methods: {
     //---点击新增，展示编辑联系人弹窗,并传空值给编辑弹窗
     showEdit() { 
-      this.showPop=false
       this.$parent.showEdit()
       this.$emit('getEditContact', '')
     },
     //---展示编辑弹窗，并传值给编辑弹窗
     goEdit(obj) { 
-      this.showPop=false
       this.$parent.showEdit()
       this.$emit('getEditContact', obj)
     },
@@ -165,10 +170,16 @@ export default {
 </script>
 
 <style scoped="scoped" lang="scss">
-	.son-wrap{
-		height: 100vh;
+	.list-box{
+		background: #F5F5F5;
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 999;
 		display: flex;
-		flex-direction:column;
+		flex-direction: column;
 	}
 	.top-num{
 		height: 100rpx;
@@ -179,6 +190,11 @@ export default {
 		justify-content: center;
 		font-weight: bold;
 		font-size: 32rpx;
+		position: relative;
+	}
+	.top-icon{
+		position: absolute;
+		right: 24rpx;
 	}
 	.top-add {
 		height:150rpx;
@@ -201,7 +217,7 @@ export default {
 		box-shadow:0px 0px 12px 2px rgba(0,0,0,0.08);
 	}
 	.bottom {
-		padding:0 24rpx 80rpx 24rpx;
+		padding:0 24rpx 100rpx 24rpx;
 		flex: 1;
 		overflow-y: scroll;
 	}

pages/scenic/scenicComponents/editContacts.vue

 <template>
 	<view class="editBox" v-show="showEdit">
-		<view @click="close()" class="return">
+		<view  class="return">
+			<!-- 新增的时候 -->
+			<view v-if="!reviseContactId">
+				已新增{{contactTotal.length}}位联系人
+			</view>
+			
+			<view @click="showEdit = false" class="return-icon">
 				<u-icon name="close" bold></u-icon>
 			</view>
+		</view>
 		<view class="editTop">
 
 		</view>
@@ -39,7 +46,7 @@
 
 <script>
 export default {
-  props: ['editContact'],
+  props: ['editContact','contactTotal'],
   data() {
     return {
       showEdit: false, //控制组件显示隐藏
@@ -52,7 +59,6 @@ export default {
   watch: {
     editContact: { 
       handler(newValue, oldValue) {
-        console.log(111)
         this.name = newValue.name||''
         this.credentialNumber = newValue.credentialNumber||''
         this.reviseContactId = newValue.id||''
@@ -63,10 +69,6 @@ export default {
     }
   },
   methods: {
-    //---关闭弹窗
-    close() {
-      this.showEdit = false
-    },
     //---保存
     keepSave() { 
       if (!this.$commonjs.nameReg().test(this.name)) {
@@ -113,9 +115,17 @@ export default {
             icon:'none'
           })
           if(!this.reviseContactId){
+            //新增的时候
             this.$parent.addChoose()
+            //成功之后清空数据，防止下次新增的时候出现之前的数据
+            this.name = '' 
+            this.credentialNumber = ''
+            this.phone=''
           }
+          if(this.reviseContactId){
+            //修改的时候
             this.showEdit = false
+          }
         } else {
           uni.showToast({
             title:res.message,
@@ -136,15 +146,22 @@ export default {
 		left: 0;
 		right: 0;
 		bottom: 0;
-		z-index: 10000;
+		z-index: 1000;
 	}
 	.return {
-		height:100rpx;
-		padding: 0 24rpx;
-		background: #FFFFFF;
+		height: 100rpx;
 		display: flex;
 		align-items: center;
-		justify-content:flex-end;
+		background: #FFF1E8;
+		color: #FC771D;
+		justify-content: center;
+		font-weight: bold;
+		font-size: 32rpx;
+		position: relative;
+	}
+	.return-icon{
+		position: absolute;
+		right: 24rpx;
 	}
 	.editTop {
 		height:200rpx;