zh_order_food_xcx/pages-takeout/confirm-order.vue

<template>
	<view class="confirm-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 box-border-box p-b-20 mb-20" @click="selectFun(2)">
					<view class="flex-justify-space mb-12">
						<view class="fs-36 fw-600 text-overflow-ellipsis w570">
							重庆工商职业学校3栋1楼503重庆工 商职业学校3栋1楼503重庆工商职业学校3栋1楼503重庆工 商职业学校3栋1楼503
						</view>
						<image class="right-icon" src="@/static/img/toRight.png" mode=""></image>
					</view>
					<view class="">
						<span class="mr-24 fs-28 fc-9">张晓鹏</span><span class="fs-28 fc-9">18883660721</span>
					</view>
				</view>
				<view class="box-input flex-justify-space align-items-center box-border-box p-b-20 mb-20" @click="selectFun(3)">
					<view class="fs-28 fw-600">预计送达</view>
					<view class="align-items-center">
						<view class="fs-28 fw-400 fc-41ABF5">预计 12:30 送达</view>
						<image class="right-icon" src="@/static/img/toRight.png" mode=""></image>
					</view>
				</view>
				
				<view v-if="false" class="box-input flex-justify-space box-border-box p-b-20 mb-20">
					<view class="fs-28 fw-600">配送方式</view>
					<view class="fs-24 fw-400 sd-box fc-FB3D03">送达宿舍</view>
				</view>
				
				<view class="p-b-20">
					<view class=" flex-justify-space box-border-box p-b-20">
						<view class="fs-28 fw-600">取件码</view>
						<view class="align-items-center" @click="selectFun(4)">
							<view class="fs-24 fw-400 fc-9">修改</view>
							<image class="right-icon" src="@/static/img/toRight.png" mode=""></image>
						</view>
					</view>
					<view class="code-box box-border-box flex-wrap-wrap">
						<view class="code-item fs-28" v-for="(item,i) in codeList" :key="i">{{item}}</view>
					</view>
				</view>
				
			</view>
			
			
			<view class="box-card box-border-box bgc-f mb-20">
				<view class="mb-32 b-b-F9F9F9">
					<view class="fs-28 fw-600 mb-24">宋氏重庆鸡公煲（重工业店）宋氏重庆鸡公煲（重工业店）宋氏重庆鸡公煲（重工业店）</view>
					<view class="flex-justify-space mb-28" v-for="(item,i) in 3" :key="i">
						<image class="goods-img" src="@/static/img/my/lqzx-bg.png" mode="scaleToFill"></image>
						<view class="w376">
							<view class="fs-28 fw-400 mb-4">
								鸡公煲单人豪华D套餐(含米饭)鸡公煲单人豪华D套
							</view>
							<view class="fs-24 fc-9 mb-4">微辣</view>
							<view class="fs-24 fc-9">x1</view>
						</view>
						<view class="fs-32 fw-600">￥59.97</view>
					</view>
				</view>
				<view class="flex-justify-space mb-24">
					<view class="fs-28 fw-400">打包费</view>
					<view class="fs-32 fw-600">￥3</view>
				</view>
				<view class="flex-justify-space mb-24">
					<view class="fs-28 fw-400">配送费</view>
					<view class="fs-32 fw-600">￥3</view>
				</view>
				<view class="flex-justify-space mb-24 p-b-20 b-b-F9F9F9" @click="selectFun(1)">
					<view class="fs-28 fw-400">优惠券</view>
					<view class="align-items-center">
						<view class="fs-32 fc-FB3D03 fw-600">-￥3</view>
						<image class="right-icon" src="@/static/img/toRight.png" mode=""></image>
					</view>
				</view>
				<view class="text-align-right p-b-20">
					<span class="fc-9 fs-28">共3件，</span>
					<span class="fw-400 fc-0 fs-28">合计￥</span>
					<span class="fw-600 fc-0 fs-44">179.1</span>
				</view>
			</view>
			
			
			<view class="box-card box-border-box bgc-f mb-20">
				<view class="flex-justify-space b-b-F9F9F9 p-b-20 mb-24">
					<view class="fs-28 fw-600 w158">备注</view>
					<input class="text-align-right fs-28" type="text" placeholder="请填写你的需求">
				</view>
				<view class="fs-28 fw-600 mb-16">平台将通过服务通知向你推送最新动态</view>
				<view class="p-16 bgc-F3F4F6 b-rad-12 tz-an-f">
					<view class="fc-0 fw-400 fs-24 mb-4">是否电话通知</view>
					<view class="fc-9 fw-400 fs-24">若开启，则订单送达系统自动曝光（电话）通知</view>
					<view class="tz-an">
						<view class="r-right" @click="fromData.is_default == 1?fromData.is_default=0:fromData.is_default=1"
						:class="fromData.is_default == 0?'n-r':'s-r'">
							<view class="r-y"></view>
						</view>
					</view>
				</view>
				<view class="p-b-20"></view>
			</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>
		
		
		<Coupon ref="coupon" @giveCouPon='giveCouPon'></Coupon>
		<SelectAddress ref="selectAddress" @giveAddress='giveAddress'></SelectAddress>
		<Time ref="selectTime" @giveTime='giveTime'></Time>
		<EditCode ref='editCode' v-model="codeList"></EditCode>
	</view>
</template>

<script>
	import Coupon from './confirm-mod/coupon.vue';
	import SelectAddress from './confirm-mod/select-address.vue';
	import Time from './confirm-mod/time.vue';
	import EditCode from './confirm-mod/edit-code.vue';
	
	export default {
		components:{Coupon,SelectAddress,Time,EditCode},
		data(){
			return{
				fromData:{
					is_default:0,
				},
				codeList:['1-3-3344','1-1-3344','12-11-3344','11-11-3344','1-3-3344','1-1-3344','12-11-3344','11-11-3344'],
			}
		},
		onLoad(e) {
			
		},
		methods:{
			selectFun(type){
				if(type === 1){
					this.$refs.coupon.getList();
				}else if(type === 2){
					this.$refs.selectAddress.getList();
				}else if(type === 3){
					this.$refs.selectTime.getList();
				}else if(type === 4){
					this.$refs.editCode.getList();
				}
			},
			giveCouPon(e){
				console.log(e);
			},
			giveAddress(e){
				console.log(e);
			},
			giveTime(e){
				console.log(e);
			},
			toSave(){
				console.log(this.codeList);
			},
		},
	}
</script>

<style scoped lang="scss">
	.code-box{
		min-height: 100rpx;
		background-color: #F3F4F6;
		border-radius: 12rpx;
		padding: 24rpx 24rpx 0 24rpx;
		.code-item{
			width: 156rpx;
			margin-right: 52rpx;
			margin-bottom: 16rpx;
		}
		.code-item:nth-child(3n){
			margin-right: 0 !important;
		}
	}
	.tz-an-f{
		position: relative;
		.tz-an{
			position: absolute;
			right: 16rpx;
			top: 0;
		}
	}
	.r-right{
		margin-top: 24rpx;
		width: 88rpx;
		height: 52rpx;
		border-radius: 200rpx;
		position: relative;
		.r-y{
			width: 44rpx;
			height: 44rpx;
			background: #FFFFFF;
			border-radius: 200rpx;
			position: absolute;
			top: 4rpx;
		}
	}
	.s-r{
		background-color: #41ABF5;
		transition:  all 1s; 
		.r-y{
			right: 4rpx !important;
			transition:  all 1s; 
		}
	}
	.n-r{
		background-color: #ccc;
		transition:  all 1s; 
		.r-y{
			left: 4rpx !important;
			transition:  all 1s; 
		}
	}
	.goods-img{
		width: 108rpx;
		height: 108rpx;
		border-radius: 8rpx;
		margin-right: 16rpx;
	}
	.right-icon{
		width: 32rpx;
		height: 32rpx;
	}
	.w376{
		width: 376rpx;
	}
	.w570{
		width: 570rpx;
	}
	.sd-box{
		padding: 3rpx 16rpx;
		height: 40rpx;
		line-height: 40rpx;
		background: rgba(251,61,3,0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}
	
	.confirm-order-box{
		position: relative;
		.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;
		}
		.wx-box{
			image{
				width: 40rpx;
				height: 40rpx;
			}
		}
		.box-input{
			border-bottom: 2rpx solid #F9F9F9;
			
		}
	}
</style>