caimei-applets-caimei/pages/user/order/create-order.vue

<template>
	<view class="container order clearfix">
		<!-- 透明模态层 -->
		<modal-layer v-if='modallayer'></modal-layer>
		<!-- 地址选择 -->
		<choice-address ref="choiceAddress" v-if="isAddress" :addressData="addressData"></choice-address>
		<!-- 商品 -->
		<goods-list ref='goods' v-if="isRequest" :goodsData="goodsData" @handleGoodList="handChangeInputGoodsList"></goods-list>
		<!-- 发票信息 -->
		<invoice-tent ref="invoice" v-if="isRequest" :invoiceData="invoiceData"></invoice-tent>
		<!-- 运费 -->
		<freight ref="freight" v-if="isRequest" :freightData="freightData" @showFreightAlert="handFreightAlertShow"></freight>
		<freight-alert v-if="isfreightTip" ref="csPhone" :cellPhone ="cellPhone"></freight-alert>
		<!-- 余额抵扣 -->
		<view class="invoice-balance">
			<view class="balabce-t">
				<view class="balabce-t-le">余额抵扣</view>
				<view class="balabce-t-ri">
					<view class="money">
						<text>可用余额：</text>
						<text>￥{{userMoney.toFixed(2)}}</text>
					</view>
					<view class="checkbox-box">
						<button class="checkbox iconfont" 
								hover-class="btn-hover"
								v-if="userMoney!=0"
								@click.stop="checkedBalabce"
								:class="[ischecked ?'icon-gouxuanl':'icon-weigouxuan']"
						>
						</button>
					</view>
				</view>
			</view>
			<view class="balabce-b" :class="{'balabce-b--hide':!ischecked}">	
				<view class="balabce-b-text animation" :style="{'transform':ischecked?'translateY(0)':'translateY(-50%)','-webkit-transform':ischecked?'translateY(0)':'translateY(-50%)'}">
					<text>当前使用：￥{{deductMoney.toFixed(2)}}，剩余：￥{{surplusMoney.toFixed(2)}}</text>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="footer" :style="{paddingBottom :isIphoneX ? '68rpx' : '0rpx'}">
			<view class="footer-le">
				<view class="footer-count">
					<text>共{{allCount}}件商品</text>
				</view>
				<view class="footer-price">
					<text>总价:<text class="price">￥{{payAllPrice.toFixed(2)}}</text></text>
				</view>
			</view>
			<view class="footer-submit" @click.stop="submit">提交订单</view>
		</view>
	</view>
</template>

<script>
	import choiceAddress from '@/components/module/creatOrder/choiceAddress'  
	import goodsList from '@/components/module/creatOrder/goodsList'
	import invoiceTent from '@/components/module/creatOrder/invoiceTent'
	import freight from '@/components/module/creatOrder/freight'
	import freightAlert from '@/components/module/modelAlert/freightAlert'
	import modalLayer from "@/components/modal-layer"
	export default {
		components:{
			choiceAddress,
			goodsList,
			invoiceTent,
			freight,
			freightAlert,
			modalLayer
		},
		data() {
			return {
				modallayer:false,
				orderID:0,
				productIDs:'',			  //获取上一级页面商品信息
				productCount:'',		  //获取上一级页面商品数量
				classifyIDS:'',			  //获取上一级页面商品分类
				cellPhone:'0755-88888888',//默认客服电话
				userID:'',				  //用户ID
				cartType:'',			  //购买类型（1购物车提交，2直接购买提交）
				submitState:'',  		  //提交状态
				balanceDeductionFlag:2,   //勾选余额的状态(1使用，2不使用)
				allCount:1,				  //订单提交总数量
				payAllPrice:0.00,		  //订单提交总金额
				allPrice:0.00,			  //订单总金额
				surplusMoney:0.00,		  //显示勾选后的剩余抵扣
				userMoney:0.00,			  //显示可使用余额
				deductMoney:0.00,		  //显示已使用的余额
				addressID:'',			  //地址ID
				isRequest:false,		  //是否加载完成渲染子组件
				isAddress:false,		  //是否加载完成地址
				isfreightTip:false,		  //控制邮费弹窗
				ischecked:false,	      //是否勾选余额
				addressData:{},			  //初始化地址信息
				goodsData:[],			  //初始化商品信息
				invoiceData:{},			  //初始化发票信息
				freightData:{},			  //邮费数据
				orderInfo:[],			  //提交的商品信息
				isIphoneX:this.$store.state.isIphoneX
			}
		},
		onLoad(option){//商品数据
			let data = JSON.parse(option.data);
			this.allPrice = data.data.allPrice;
			this.allCount = data.data.allCount;
			this.payAllPrice = this.allPrice;
			// console.log(data)
			if(option.type =='prodcut'){
				this.cartType = 2
				this.productCount = data.data.productCount
				this.productIDs = data.data.id
				this.classifyIDS =  data.data.classifyID
			}else{
				this.cartType = 1
				this.productCount = data.data.productCount
				this.productIDs = data.data.id
				this.classifyIDS =  data.data.classifyID
			}
			this.getInitCrearOrder(option);
			this.getAddressData()
		},
		methods: {
			getInitCrearOrder(option){//获取订单商品信息&&邮费信息&&发票信息
				this.$api.getStorage().then((resolve) =>{
					this.userID = resolve.userID
					let params ={
							userId:this.userID,
							count:this.productCount,
							organizeID:this.userOrganizeID,
							classifyIDS:this.classifyIDS,
							productIDs:this.productIDs
						}
					this.$api.lodingGet('/order/confirm',params,
						response => {
							// console.log(response)
							let resData = response.data;
							this.isRequest = true
							this.goodsData = resData.shopList;
							this.userMoney = resData.userMoney
							this.freightData = {freePostFlag:resData.freight,cellPhone:resData.cellPhone}
							this.invoiceData = resData.invoice
							this.goodsData = resData.shopList
						}
					)
				})	
			},
			getAddressData(){//获取地址信息
				this.$api.getStorage().then((resolve) =>{
					this.userID = resolve.userID
					this.$api.lodingGet('/personal/findAddress',{index:1,pageSize:1,userID:this.userID},
						response => {
							this.isAddress = true
							this.addressData = {}
							if(response.results != ''){
								this.addressID = response.results[0].addressID;
								this.addressData = response.results[0];
							}else{
								this.addressData = this.addressData;
							}
						}
					)
				})
			},
			handChangeInputGoodsList(data){//对应供应商的留言信息
				this.goodsData = data;
				// console.log(this.goodsData)
			},
			submit(){//提交订单
				if(this.addressID == ''){
					this.$util.msg('请先添加收货地址～',3000);
					return
				}
				this.orderInfo = this.goodsData.map(el => {
					let productInfo = [];
					el.productsList.forEach(item => {
						productInfo.push({
							productId:item.id,
							productNum:item.productCount
						})
					})
					if(el.note == null){
						el.note = ''
					}else{
						el.note = el.note
					}
					return {shopId:el.shopID,note:el.note,productInfo:productInfo}
				})
				let param = {
						userId:this.userID,
						organizeID:this.userOrganizeID,
						cartType:this.cartType,
						addressID:this.addressID,
						orderInfo:this.orderInfo,
						balanceDeductionFlag:this.balanceDeductionFlag,
						orderShouldPayFee:this.payAllPrice,
					}
				this.modalLayer = true;	
				// console.log(JSON.stringify(param))
				this.$api.lodingGet('/order/submitOrder',{'params':JSON.stringify(param)},
					response => {
						if(response.code === '1'){
							this.submitState ='success'
							let data = {orderID:response.data.orderID}
							this.$api.navigateTo(`/pages/user/order/order-cashier?type=${this.submitState}&data=${JSON.stringify({data:data})}`)
						}else if(response.code === '2'){
							this.submitState ='nosuccess'
							let data = {
									orderID:response.data.orderID,
									orderNo:response.data.orderNo,
									orderMark:response.data.orderMark,
									payableAmount:response.data.payableAmount
							}
							this.$api.navigateTo(`/pages/user/order/order-cashier?type=${this.submitState}&data=${JSON.stringify({data:data})}`)
						}else{
							this.$util.msg(response.msg,3000);
						}
					}
				)
			},
			handFreightAlertShow(){//显示邮费弹窗
				this.isfreightTip = true;
				this.cellPhone = this.freightData.cellPhone;
			},
			hideFreight(){//关闭邮费弹窗
				this.isfreightTip = false;
			},
			checkedBalabce(){//勾选使用余额
				if(this.userMoney == 0){
					return
				}else{
					this.ischecked = !this.ischecked
					if(this.ischecked){
						this.balanceDeductionFlag =1
						if(this.userMoney>this.payAllPrice){
							this.payAllPrice =0.00
							this.deductMoney = this.allPrice				            //勾选后使用抵余额
							this.surplusMoney = this.userMoney - this.deductMoney	    //勾选后的剩余抵扣
						}else{
							this.payAllPrice = this.allPrice - this.userMoney       	//勾选后的总价
							this.deductMoney = this.userMoney				            //勾选后使用抵余额
							this.surplusMoney = this.userMoney - this.deductMoney	    //勾选后的剩余抵扣
						}
					}else{
						this.payAllPrice = this.allPrice
						this.balanceDeductionFlag = 2
					}
				}
			}	
		},
		onShow() {
			// this.addressID = ''
			let pages = getCurrentPages();
			let currPage = pages[pages.length-1];
			if(currPage.data.select =='select'){
				this.isAddress = true
				let SelectData = uni.getStorageSync('selectAddress');
				this.addressID = SelectData.addressID;
				this.addressData = SelectData	
			}else{
				this.getAddressData()
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: auto;
		background:#F7F7F7;
	}
	.btn-hover{
		background: #FFFFFF;
	}
	.animation{
		/* transition: transform 0.3s ease;*/
		transition-property: transform;
		transition-duration: 0.3s;
		transition-timing-function: ease;
	}
	.order{
		padding-bottom: 134rpx;
	}
	.invoice-freight{
		width: 702rpx;
		padding: 0 24rpx;
		height: 86rpx;
		line-height: 86rpx;
		font-size: $font-size-base;
		color: $text-color;
		background: #FFFFFF;
		float: left;
		font-weight: bold;
		.freight-left{
			float: left;
			.icon-yunfeishuoming{
				height: 100%;
				padding: 0 15rpx;
				color: $color-system;
				font-weight: normal;
			}
		}
		.freight-right{
			float: right;
			color: #2A81FF;
		}
	}
	.freight-alert{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.5);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 8888;
		transition: all 0.4s;
		&.none{
			display: none;			
		}
		&.show{
			display: block;
		}
		.content{
			width: 518rpx;
			height: 420rpx;
			position: absolute;
			background: $bg-color;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			margin: auto;
			.text-content{
				width: 448rpx;
				height: 264rpx;
				padding: 35rpx;
				float: left;
				.title{
					line-height: 40rpx;
					font-size: $font-size-base;
					color: $text-color;
					text-align: center;
					font-weight: bold;
					margin-bottom: 32rpx;
				}
				.text{
					line-height: 36rpx;
					font-size: $font-size-sb;
					color: $text-color;
					text-align: justify;
					margin-top: 22rpx;
				}
				.tel{
					line-height: 36rpx;
					font-size: $font-size-sb;
					color: $text-color;
					text-align: justify;
					margin-top: 22rpx;
					font-weight: bold;
					.txt{
						margin-left: 10rpx;
					}
				}
			}
			.btn{
				width: 100%;
				height: 88rpx;
				float: left;
				background: #000000;
				line-height: 88rpx;
				font-size: $font-size-base;
				text-align: center;
				color: #FFFFFF;
				border-radius: 0;
				padding: 0;
			}
		}
	}
	.invoice-balance{
		width: 702rpx;
		height: auto;
		padding:0 24rpx;
		background: #FFFFFF;
		float: left;
		margin-top: 24rpx;
		margin-bottom: 24rpx;
		.balabce-t{
			width: 100%;
			height: 86rpx;
			line-height: 86rpx;
			font-size: $font-size-base;
			color: $text-color;
			float: left;
			.balabce-t-le{
				float: left;
				font-weight: bold;
			}
			.balabce-t-ri{
				float: right;
				display: flex;
				align-items: center;
				.money{
					display: flex;
					float: left;
				}
				.checkbox-box{
					display: flex;
					width: 60rpx;
					float: left;
					height: 100%;
					font-size: $font-size-sm;
					.checkbox{
						width: 40rpx;
						text-align: right;
						box-sizing: border-box;
						text-align: center;
						text-decoration: none;
						border-radius: 0;
						-webkit-tap-highlight-color: transparent;
						overflow: hidden;
					}
				}	
			}
		}
		.balabce-b{
			width: 100%;	
			float: left;
			overflow: hidden;
			.balabce-b-text{
				width: 100%;
				line-height: 58rpx;
				font-size: $font-size-sm;
				color: #FF2A2A;
				text-align: right;
				float: right;
			}
			&.balabce-b--hide {
				padding: 0 0;
				height: 0px;
				line-height: 0px;
			}	
		}
	}
	.footer{
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 995;
		display: flex;
		align-items: center;
		width: 100%;
		height: 110rpx;
		line-height: 110rpx;
		justify-content: space-between;
		font-size: $font-size-base;
		background-color: #FFFFFF;
		z-index: 998;
		color: $text-color;
		.footer-le{
			width:550rpx;
			height:100%;
			float: left;
		}
		.footer-count{
			float: left;
			padding-left: 24rpx;
			font-weight: bold;
		}
		.footer-price{
			float: right;
			text-align: right;
			color: $text-color;
			font-weight: bold;
			padding-right: 24rpx;
			.price{
				font-size: $font-size-lg;
				color: #FF2A2A;
			}
		}
		.footer-submit{
			display:flex;
			align-items:center;
			justify-content: center;
			width: 200rpx;
			height: 100%;
			color: #FFFFFF;
			background:linear-gradient(135deg,rgba(242,143,49,1) 0%,rgba(225,86,22,1) 100%);
		}
	}
	
</style>