zh_order_food_xcx/pages-buy/save-order.vue

<template>
	<view class="save-order-box iPhone-bottom flex-common-css box-border-box">
		<view class="bg-box"></view>
		<Nav title='提交订单' bgckgroundBox='transparent'></Nav>
		
		<view class="scroll-view-css box-border-box p-24">
			<view class="box-card box-border-box mb-20 bgc-f">
				<view class="box-input align-items-center box-border-box p-b-20 mb-20">
					<view class="fs-28 fw-600 w158">姓名</view>
					<input type="text" placeholder="请输入姓名">
				</view>
				<view class="box-input align-items-center box-border-box p-b-20 mb-20">
					<view class="fs-28 fw-600 w158">手机号</view>
					<input type="number" placeholder="请输入手机号">
				</view>
				<view class="box-input align-items-center box-border-box p-b-20 mb-20">
					<view class="fs-28 fw-600 w158">验证码</view>
					<input type="number" placeholder="请输入验证码">
					<view class="fs-28 fc-41ABF5 code-box" @click="getCode()">{{codeText}}{{isCode?'s':''}}</view>
				</view>
				<view class="box-input align-items-center box-border-box p-b-20 mb-20">
					<view class="fs-28 fw-600 w158">联系地址</view>
					<input type="text" placeholder="请输入联系地址（选填）">
				</view>
			</view>
			
			<view class="box-card box-border-box mb-20 bgc-f">
				<view class="box-top box-border-box flex-justify-space">
					<view class="box-left display-flex">
						<image src="@/static/img/buy/group-bg.png" mode="scaleToFill"></image>
						<view class="w336 fs-28 fw-400">
							巧大耳朵游乐场大耳朵游乐 1大耳朵游乐场
						</view>
					</view>
					<view class="box-right">
						<view class="fs-32 fw-600 text-align-right mb-12">￥19.5</view>
						<view class="fs-26  text-align-right fc-9">x1</view>
						<!-- <view class="display-flex align-items-center">
							<view class="right-only-right-red fw-500 text-align-center fs-36 fc-f">-</view>
							<view class="right-only-right-2 text-align-center fs-28 fw-400">1</view>
							<view class="right-only-right-add fw-500 text-align-center fs-36 fc-f">+</view>
						</view> -->
					</view>
				</view>
				<view class="box-buttom text-align-right">
					<span class="fs-28 fc-9 fw-400">共5件，</span>
					<span class="fs-28 fc-0 fw-400">合计￥</span>
					<span class="fs-44 fc-0 fw-b">19.5</span>
				</view>
			</view>
			
			<view class="box-card box-border-box mb-20 bgc-f flex-justify-space">
				<view class="fs-28 fw-600 w158">备注</view>
				<input class="text-align-right" type="text" placeholder="请填写你的需求">
			</view>
			
			<view class="box-card box-border-box mb-20 bgc-f flex-justify-space">
				<view class="fs-28 fw-600 w158">支付方式</view>
				<view class="wx-box display-flex">
					<image src="@/static/img/common/wx-zf.png" mode="scaleToFill"></image>
					<view class="fs-28 fw-400 ml-10">微信支付</view>
				</view>
			</view>
		</view>
		
		<view class="bottom-box box-border-box p-24">
			<view class="flex-justify-space">
				<view class="align-items-flex-end box-1">
					<span class="fs-28 fc-f fw-600">￥</span>
					<span class="fs-44 fc-f fw-600">19.5</span>
				</view>
				<view class="text-align-center box-2 fs-32 fc-f fw-600" @click="toSave()">立即支付</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				isCode:false,
				codeText:'获取验证码',
			}
		},
		methods:{
			getCode(){
				if (this.isCode) {
					return
				}
				this.isCode = true;
				this.codeText = 60;
				let timer = setInterval(() => {
				  this.codeText -= 1;
				  if (this.codeText <= 0) {
				    clearInterval(timer);
					this.isCode = false;
					this.codeText = '获取验证码'
				  }
				}, 1000);
			},
		},
	}
</script>

<style scoped lang="scss">
	.save-order-box{
		position: relative;
		
		.right-only-right-red{
			width: 44rpx;
			height: 44rpx;
			line-height: 40rpx;
			border-radius: 12rpx;
			border: 1rpx solid #41ABF5;
			color: #41ABF5;
		}
		.right-only-right-add{
			width: 44rpx;
			height: 44rpx;
			line-height: 40rpx;
			background: linear-gradient( 117deg, #57CAFF 0%, #41ABF5 100%);
			border-radius: 12rpx;
		}
		.right-only-right-2{
			min-width: 50rpx;
		}
		
		.bg-box{
			width: 100%;
			height: 448rpx;
			filter: blur(80rpx);
			background: linear-gradient(to right,rgba(176, 252, 250, 0.6),rgba(249,246,224,0.87),rgba(249,246,224,0.87));
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}
		.bottom-box{
			background-color: #fff;
			.box-1{
				flex: 1;
				height: 100rpx;
				background: #333;
				border-radius: 200rpx 0rpx 0rpx 200rpx;
				box-sizing: border-box;
				padding-left: 32rpx;
				padding-bottom: 20rpx;
			}
			.box-2{
				width: 200rpx;
				height: 100rpx;
				line-height: 100rpx;
				background: #41ABF5;
				border-radius: 0rpx 200rpx 200rpx 0rpx;
				text-align: center;
			}
		}
		.box-card{
			width: 100%;
			min-height: 88rpx;
			border-radius: 20rpx;
			padding: 24rpx 24rpx 0 24rpx;
			.box-top{
				padding-bottom: 24rpx;
				border-bottom: 2rpx solid #F9F9F9;
				margin-bottom: 24rpx;
				.box-left{
					image{
						width: 108rpx;
						height: 108rpx;
						border-radius: 8rpx;
						margin-right: 16rpx;
					}
					.w336{
						width: 336rpx;
					}
				}
			}
			.box-buttom{
				padding-bottom: 24rpx;
			}
		}
		.box-input{
			border-bottom: 2rpx solid #F9F9F9;
			position: relative;
			.w158{
				width: 158rpx;
			}
			input{
				font-size: 28rpx;
			}
			.code-box{
				position: absolute;
				right: 0;
				top: 0;
			}
		}
		.wx-box{
			image{
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
</style>