确认订单和支付订单页面布局

pages2/order/confirm_list.vue

@@ -1,21 +1,32 @@
 <template>
-	<view>
+	<view class="confirms">
 		<nav-bar title="确认订单"></nav-bar>
-		<view style="padding: 8rpx;padding-bottom: 98rpx;">
-			<view  >
+		<view class="contents">
+			<!-- <view  > -->
 				<view class="item">
-					<view style="display: flex;justify-content: space-between;padding: 16rpx;">
-						<image :src="$method.splitImgHost(detail.coverUrl)" style="height: 134rpx;width: 278rpx;border-radius: 16rpx;"></image>
-						<view style="margin-left: 20rpx;">
+					<view style="display: flex;justify-content: space-between;">
+						<image :src="$method.splitImgHost(detail.coverUrl)" style="height: 120rpx;width: 204rpx;border-radius: 16rpx;"></image>
+						<view class="right_con" style="margin-left: 20rpx;">
 							<view style="color: #333333;font-size: 30rpx;font-weight: bold;">
 								{{detail.goodsName}}
 							</view>
 							<view class="priceTag">
 								¥ {{detail.standPrice}}
 							</view>
+
+							<view class="input_c" v-if="detail.templateType!=null&&detail.goodsType==1">
+								<view v-if="detail.templateType=='class'" style="display: flex;justify-content: space-between;align-items: center;height: 56rpx;padding:8rpx;border-radius: 8rpx;" @click="openPopup(0)">
+									<view style="color: #666666;font-size: 24rpx;">{{gradeIndex < 0 ?'选择班级':gradeList[gradeIndex].className}}</view>
+									<view><u-icon name="arrow-down" color="#999999" size="28"></u-icon></view>
+								</view>
+								<view v-if="detail.templateType=='apply'"  style="display: flex;justify-content: space-between;align-items: center;height: 56rpx;padding:8rpx;border-radius: 8rpx;" @click="openPopup(1)">
+									<view style="color: #666666;font-size: 24rpx;" >{{!applyAreas.areaName?'报考地区':examDate.examineName+'-'+applyAreas.areaName+'-'+applyAreas.cityName}}</view>
+									<view><u-icon name="arrow-down" color="#999999" size="28"></u-icon></view>
+								</view>
+							</view>
 						</view>
 					</view>
-					<view v-if="detail.templateType!=null&&detail.goodsType==1">
+					<!-- <view v-if="detail.templateType!=null&&detail.goodsType==1">
 						<u-line color="#D6D6DB" />
 						<view v-if="detail.templateType=='class'" style="display: flex;justify-content: space-between;align-items: center;height: 80rpx;padding:16rpx;" @click="openPopup(0)">
 							<view style="color: #666666;font-size: 24rpx;">{{gradeIndex < 0 ?'选择班级':gradeList[gradeIndex].className}}</view>
@@ -25,9 +36,9 @@
 							<view style="color: #666666;font-size: 24rpx;" >{{!applyAreas.areaName?'报考地区':examDate.examineName+'-'+applyAreas.areaName+'-'+applyAreas.cityName}}</view>
 							<view><u-icon name="arrow-right" color="#999999" size="28"></u-icon></view>
 						</view>
-					</view>
+					</view> -->
 				</view>
-			</view>
+			<!-- </view> -->
 		</view>
 		<view class="bottomBox safeArea">
 			<view class="sums">
@@ -42,20 +53,22 @@
 		
 		<u-popup v-model="show" mode="bottom" border-radius="40">
 			<view class="popup_box">
-				<view style="margin-bottom: 20rpx;">
-					<view class="line1"></view>
+				<view class="check_head">
+					<!-- <view class="line1"></view> -->
 					<view class="grade">选择班级</view>
+					<u-icon name="close" color="#CFCFCF" size="30" @click="closePop(0)"></u-icon>
 				</view>
-				<u-line color="#D6D6DB" />
-				<view>
-					<scroll-view scroll-y="true" style="height: 536rpx;">
+				<!-- <u-line color="#D6D6DB" /> -->
+				<view class="check_con">
+					<scroll-view scroll-y="true" style="height: 580rpx;">
 						<view>
 							<u-radio-group v-model="gradeValue" @change="radioGroupChange">
-								<view v-for="(item, index) in gradeList" :key="index" >
-									<view style="display: flex;align-items: center;padding: 20rpx;">
+								<view v-for="(item, index) in gradeList" :key="index" class="items_c">
+									<view class="border_c">
 										<view>
 											<u-radio
 												shape="circle"
+												active-color="#FC3F3F"
 												:name="index"
 												:disabled="item.studentNum > 0 && item.studentNum == item.studentUpper"
 											>
@@ -82,12 +95,12 @@
 		</u-popup>
 		<u-popup v-model="show1" mode="bottom" border-radius="40">
 			<view class="popup_box">
-				<view style="margin-bottom: 20rpx;">
-					<view class="line1"></view>
+				<view class="check_head">
 					<view class="grade">选择考期/地区</view>
+					<u-icon name="close" color="#CFCFCF" size="30" @click="closePop(1)"></u-icon>
 				</view>
-				<u-line color="#D6D6DB" />
-				<view style="display: flex;height: 500rpx;">
+				
+				<view style="display: flex;height: 550rpx;">
 					<view style="width: 50%;">
 						<view class="topTxt">考期</view>
 						<view>
@@ -383,6 +396,13 @@ export default {
 				this.getProvinceList()
 			}
 			
+		},
+		closePop(index) {
+			if (index == 0) {
+				this.show = false
+			} else {
+				this.show1 = false
+			}
 		}
 	},
 	onReachBottom() {},
@@ -391,10 +411,21 @@ export default {
 </script>
 <style >
 	page{
-		background-color: #EAEEF1;
+		background-color: #fff;
 	}
 </style>
 <style scoped lang="scss">
+.confirms {
+    width: 100%;
+    height: 100vh;
+    // background: #fff;
+	.contents {
+		padding: 32rpx 32rpx 132rpx 32rpx;
+	}
+	.right_con {
+		width: 450rpx;
+	}
+}
 	.picker-item {
 	        height: 50px;
 	        align-items: center;
@@ -435,16 +466,18 @@ export default {
 		padding-left: 15rpx;
 	}
 	.okBtn{
-		width: 200rpx;
-		height: 64rpx;
-		background: linear-gradient(0deg, #015EEA, #00C0FA);
-		border-radius: 32rpx;
+		width: 232rpx;
+		height: 92rpx;
+		line-height: 92rpx;
+		background: #FC3F3F;
+		border-radius: 120rpx;
 		color: #FFFFFF;
 		text-align: center;
-		line-height: 64rpx;
+		font-size: 32rpx;
+		font-weight: 500;
 	}
 	.confrim-btn{
-		border-top:1px solid #eee;
+		// border-top:1px solid #eee;
 		height: 98rpx;
 		width: 100%;
 		display: flex;
@@ -452,11 +485,12 @@ export default {
 		justify-content:center;
 	}
 	.grade{
-		height: 23rpx;
-		font-size: 24rpx;
-		color: #999999;
-		margin: 0 auto;
-		margin-top: 15rpx;
+		// height: 23rpx;
+		font-size: 32rpx;
+		color: #222;
+		// margin: 0 auto;
+		// margin-top: 15rpx;
+		font-weight: 500;
 		text-align: center;
 	}
 	.line1{
@@ -468,9 +502,26 @@ export default {
 		margin-top: 15rpx;
 	}
 	.popup_box {
-		height: 700rpx;
+		height: 824rpx;
 		box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
-		border-radius: 32rpx 32rpx 0rpx 0rpx;
+		border-radius: 28rpx 28rpx 0rpx 0rpx;
+		.check_head {
+			padding: 0rpx 32rpx;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			height: 104rpx;
+    		background: #F2F2F2;
+		}
+		.items_c {
+			padding: 0rpx 32rpx;
+		}
+		.border_c {
+			display: flex;
+			align-items: center;
+			padding: 20rpx 0rpx;
+			border-bottom: 1rpx solid #F2F2F2;
+		}
 	}
 	.item{
 		width: 100%;
@@ -479,12 +530,15 @@ export default {
 		margin-bottom: 20rpx;
 	}
 	.priceTag{
-		font-size: 30rpx;
+		font-size: 28rpx;
 		font-family: PingFang SC;
 		font-weight: bold;
-		color: #FF2D55;
-		display: flex;
-		flex-direction: row-reverse;
+		color: #FC3F3F;
+		margin-top: 6rpx;
+		margin-bottom: 16rpx;
+	}
+	.input_c {
+		background: #F8F8F8;
 	}
 	.btn2{
 		width: 232rpx;

pages2/order/confirm_pay.vue

@@ -2,11 +2,10 @@
 	<view>
 		<nav-bar title="订单支付"></nav-bar>
 		<view>
-			<view style="padding: 8rpx;">
+			<view>
 				<view class="box2">
 					<view class="title2">支付信息</view>
-					<u-line color="#D6D6DB" />
-					<view style="padding:10rpx 30rpx;" v-for="(item,index) in shoppingCartList" :key="index">
+					<!-- <view style="padding:10rpx 30rpx;" v-for="(item,index) in shoppingCartList" :key="index">
 						<view class="list_title">
 							<view class="txt_left">商品名称</view>
 							<view class="txt_right">{{item.goodsName}}</view>
@@ -15,9 +14,21 @@
 							<view class="txt_left">应付金额</view>
 							<view class="txt_right_price">¥ {{item.standPrice}}</view>
 						</view>
+					</view> -->
+					<view v-for="(item,index) in shoppingCartList" :key="index" style="display: flex;justify-content: space-between; margin-bottom: 32rpx;">
+						<image :src="$method.splitImgHost(item.coverUrl)" style="height: 120rpx;width: 204rpx;border-radius: 16rpx;"></image>
+						<view class="right_con" style="margin-left: 20rpx;">
+							<view style="color: #333333;font-size: 30rpx;font-weight: bold;">
+								{{item.goodsName}}
+							</view>
+							<view class="priceTag">
+								¥ {{item.standPrice}}
+							</view>
+						</view>
 					</view>
-					<view style="padding:10rpx 30rpx;" >
-						<u-line color="#D6D6DB" />
+
+					<view class="info_right" >
+						<!-- <u-line color="#D6D6DB" /> -->
 						<view class="list_item">
 							<view class="txt_left">应付总金额</view>
 							<view class="txt_right_price">¥ {{totalPrice}}</view>
@@ -26,8 +37,8 @@
 				</view>
 				<view class="box3">
 					<view class="title2">支付方式</view>
-					<u-line color="#D6D6DB" />
-					<view style="padding:20rpx 30rpx;">
+					
+					<view>
 						<u-radio-group v-model="value" @change="radioGroupChange">
 						<view class="list_item">
 							<view class="txt_left_pay"><image src="/static/wepay.png" class="pay_icon"></image>微信支付</view>
@@ -39,10 +50,22 @@
 						</view>
 						</u-radio-group>
 					</view>
+					<u-line color="#D6D6DB" />
 				</view>
 			</view>
 		</view>
-		<button class="bottomBtn" @click="pay()" :disabled="btnNo">确认支付</button>
+		<view class="bottomBox safeArea">
+			<view class="sums">
+				<text class="all_sum">总金额：</text>
+				<text class="priceTag">¥ {{totalPrice}}</text>
+			</view>
+			
+			<view style="display: flex;color: #FFFFFF;align-items: center;">
+				<!-- <view class="btn2" @click="pay()">确认支付</view> -->
+				<button class="btn2" @click="pay()" :disabled="btnNo">确认支付</button>
+			</view>
+		</view>
+		<!-- <button class="bottomBtn" @click="pay()" :disabled="btnNo">确认支付</button> -->
 		
 		<u-modal v-model="showModal" :confirm-text="confirmText" cancel-text="知道了" cancel-color="#666666" confirm-color="rgba(0, 122, 255, 1);" :show-confirm-button="showConfirmButton" :show-cancel-button="true" :content="modalMsg" @cancel="modalCancel()" @confirm="modalConfirm()" ref="uModal" ></u-modal>
 	</view>
@@ -277,7 +300,7 @@ export default {
 		background-color: #EAEEF1;
 	}
 </style>
-<style scoped>
+<style lang="scss" scoped>
 	
 	.txt_left_pay{
 		display: flex;
@@ -293,9 +316,11 @@ export default {
 	}
 	.box3{
 		width: 100%;
+		height: 886rpx;
 		background: #FFFFFF;
-		border-radius: 16rpx;
+		// border-radius: 16rpx;
 		margin-top: 16rpx;
+		padding: 32rpx 32rpx 0rpx 32rpx;
 	}
 	.tip{
 		font-size: 24rpx;
@@ -309,12 +334,12 @@ export default {
 		color: #666666;
 	}
 	.txt_right_price{
-		font-size: 30rpx;
+		font-size: 32rpx;
 		font-weight: bold;
 		color: #FF2D55;
 	}
 	.txt_left{
-		font-size: 24rpx;
+		font-size: 28rpx;
 		color: #666666;
 	}
 	.txt_right{
@@ -330,21 +355,39 @@ export default {
 	.list_item{
 		display: flex;
 		justify-content: space-between;
-		height: 80rpx;
+		height: 110rpx;
 		align-items: center;
 	}
 	.title2{
-		font-size: 30rpx;
+		font-size: 32rpx;
 		font-weight: bold;
 		color: #333333;
-		height: 80rpx;
-		line-height: 80rpx;
-		margin-left: 30rpx;
+		// height: 80rpx;
+		// line-height: 80rpx;
+		// margin-left: 30rpx;
+		margin-bottom: 32rpx;
 	}
 	.box2{
 		width: 100%;
 		background: #FFFFFF;
-		border-radius: 16rpx;
+		// border-radius: 16rpx;
+		padding: 32rpx 32rpx 0rpx 32rpx;
+		.right_con {
+			width: 450rpx;
+		}
+		.priceTag{
+			font-size: 28rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #FC3F3F;
+			margin-top: 6rpx;
+			margin-bottom: 16rpx;
+		}
+		.info_right {
+			height: 110rpx;
+			line-height: 110rpx;
+			border-top: 1rpx solid #F2F2F2;
+		}
 	}
 	.box1_t2{
 		font-size: 24rpx;
@@ -381,4 +424,42 @@ export default {
 		font-size: 30rpx;
 		border-radius: 0;
 	}
+	.bottomBox{
+		position: fixed;
+		bottom: 0;
+		width: 100%;
+		left: 0;
+		height: 132rpx ;
+		background-color: #FFFFFF;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		box-sizing: unset;
+		box-shadow: 0px -2px 6px 0px rgba(0,0,0,0.1000);
+		>view{
+			margin: 0 30rpx;
+		}
+		.sums {
+			display: flex;
+		}
+		.all_sum {
+			font-size: 28rpx;
+			font-weight: 500;
+			color: #303030;
+		}
+		.priceTag {
+			font-size: 32rpx;
+			font-weight: 800;
+			color: #FC3F3F;
+		}
+		.btn2{
+			width: 232rpx;
+			height: 92rpx;
+			background: #FC3F3F;
+			border-radius: 120rpx;
+			text-align: center;
+			line-height: 92rpx;
+			color: #fff;
+		}
+	}
 </style>