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 v-if="addressData.id" class="fs-36 fw-600 text-overflow-ellipsis w570">{{addressData.address||''}}{{addressData.school_name||''}}{{addressData.dorm_name||''}}</view>
						<view v-else class="fs-36 fw-600 text-overflow-ellipsis w570">请选择地址</view>
						<image class="right-icon" src="@/static/img/toRight.png" mode=""></image>
					</view>
					<view class="" v-if="addressData.id">
						<span class="mr-24 fs-28 fc-9">{{addressData.consignee||''}}</span><span class="fs-28 fc-9">{{addressData.phone||''}}</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  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 text-overflow-ellipsis-one" v-for="(item,i) in fromData.pickup_code" :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 cardData.goods_list" :key="i">
						<image class="goods-img" :src="item.serve_image" mode="aspectFill"></image>
						<view class="w376">
							<view class="fs-28 fw-400 mb-4">
								{{item.serve_name}}
							</view>
							<view class="fs-24 fc-9 mb-4">{{item.serve_desc}}</view>
							<view class="fs-24 fc-9">x{{item.number}}</view>
						</view>
						<view class="fs-32 fw-600">￥{{Number(item.number * Number(item.price)).toFixed(2)}}</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">共{{cardData.total_num||0}}件，</span>
					<span class="fw-400 fc-0 fs-28">合计￥</span>
					<span class="fw-600 fc-0 fs-44">{{cardData.total_price||0}}</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">{{cardData.total_price||0}}</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="fromData.pickup_code"></EditCode>
	</view>
</template>

<script>
	import {getExpressCoupon,getExpressCreate,getExpressPay} from '@/api/express.js';
	import {getAddressDefault} from '@/api/member.js'
	import {getShopIngList} from '@/api/shopping.js'
	
	
	import tools from "@/service/tools";
	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{
				type:2,//1外卖 2代取 3干洗
				fromData:{
					school_id:'',
					site_id:'',
					
					address_id:'',
					coupon_id:'',
					note:'',
					// is_default:0,
					pickup_code:[],
				},
				addressData:{},
				
				quanInfo:{
					
				},
				quanData:{
					coupon:[],//可用
					receive:[],//可领
				},
				
				cardData:{
					goods_list:[],
				},
				
				isAJAX:false,
			}
		},
		onLoad(e) {
			this.type = Number(e.type)
			if(e.pickup_code){
				this.fromData.pickup_code = e.pickup_code.split(',').map(String)
				console.log(this.fromData.pickup_code);
				this.getCard();
			}
			this.getAddressDefault();
			this.getExpressCoupon();
		},
		methods:{
			// 获取购物车
			getCard(){
				getShopIngList({type:this.type}).then((res)=>{
					if(res.code === 1){
						this.cardData = res.data;
					}
				})
			},
			// 获取优惠券
			getExpressCoupon(){
				let operate_id = uni.getStorageSync('operate_id');
				getExpressCoupon({operate_id:operate_id}).then((res)=>{
					if(res.code === 1){
						this.quanData = res.data;
					}
				})
			},
			// 获取默认地址
			getAddressDefault(){
				getAddressDefault().then((res)=>{
					if(res.code === 1){
						this.addressData = res.data
						if(this.addressData.id){
							this.fromData.address_id = this.addressData.id;
						}
					}
				})
			},
			
			selectFun(type){
				if(type === 1){
					// 选择优惠券
					this.$refs.coupon.getList();
				}else if(type === 2){
					// 选择地址
					if(this.addressData.id){
						this.$refs.selectAddress.id = this.addressData.id;
					}
					this.$refs.selectAddress.getList();
				}else if(type === 3){
					// 选择时间
					this.$refs.selectTime.getList();
				}else if(type === 4){
					// 编辑code
					this.$refs.editCode.getList();
				}
			},
			giveCouPon(e){
				console.log(e);
			},
			giveAddress(e){
				this.addressData = e;
				this.fromData.address_id = this.addressData.id;
			},
			giveTime(e){
				console.log(e);
			},
			toSave(){
				if(!this.fromData.address_id){
					return tools.error('请先选择地址')
				}
				
				if(this.isAJAX){
					return
				}
				this.isAJAX = true;
				this.fromData.school_id = uni.getStorageSync('school_id');
				this.fromData.site_id = uni.getStorageSync('site_id');
				
				getExpressCreate(this.fromData).then((res)=>{
					if(res.code === 1){
						getExpressPay({order_id:res.data.order_id}).then((ret)=>{
							if(ret.code === 1){
								uni.requestPayment({
								  provider: "wxpay", //支付类型-固定值
								  timeStamp: ret.data.wx_pay.timeStamp + "", // 时间戳（单位：秒）
								  nonceStr: ret.data.wx_pay.nonceStr, // 随机字符串
								  package: ret.data.wx_pay.package, // 固定值
								  signType: ret.data.wx_pay.signType, //固定值
								  paySign: ret.data.wx_pay.paySign, //签名
								  success: (ren) => {
								    tools.success("支付成功");
									this.isAJAX = false;
									setTimeout(()=>{
										uni.switchTab({
											url:"/pages/index/index"
										})
									},1500)
								  },
								  fail: (err) =>{
									  this.isAJAX = false;
								    tools.error("支付失败");
								  },
								});
							}
						})
					}
				})
			},
		},
	}
</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>