xusfood_client/shopping/submitorder.vue

<template>
    <view class="">
		<u-navbar
			title="提交订单"
			@leftClick="leftClick"
			:autoBack="true"
			 :safeAreaInsetTop="true"
		>
		</u-navbar>
        <view class="addr page-wrap u-flex u-row-between">
        	<view class="left">
        		<view class="top">
        			<text class="label" v-if="orderInfo.receive.ifDefault">默认</text>{{receive.address}}
        		</view>
				<view class="center">{{receive.receiveAdress}}</view>
				<view class="bottom">{{receive.receiveName}} {{receive.receivePhone}}</view>
        	</view>
			<u-icon name="arrow-right" color="#676767" size="20" @click="selectAddr"></u-icon>
        </view>
		<!-- <view class="payway page-wrap u-flex u-row-between">
			<view class="left">支付方式</view>
			<view class="u-flex">
				微信支付
				<u-icon name="arrow-right" color="#676767" size="20"></u-icon>
			</view>
		</view> -->
		<view class="order-product page-wrap">
			<view class="product u-flex" v-for="(item,index) in orderInfo.goodsList" :key="item.id">
				<u--image :showLoading="true" :src="item.mainImg" width="180rpx" height="180rpx"></u--image>
				<view class="text">
					<view class="up">
						<view class="name ellipsis-2">{{item.goodsName}}</view>
						<view class="info">
							{{item.specification}}
							{{item.unit}}
						</view>
					</view>
					<view class="down u-flex u-row-between">
						<view class="left">
							<view class="" v-if="vuex_member_info.priceType>1">
								<text class="price">¥ <text class="price-num">{{item.vipPrice}}</text></text>
								<text class="vip-icon">VIP</text>
								<text class="original-price gray line-through">¥ {{item.salePrice}}</text>
							</view>
							<view class="" v-else>
								<text class="price">¥ <text class="price-num">{{item.salePrice}}</text></text>
							</view>
						</view>
						<u-number-box v-if="fromPage!='creditOrder'" v-model="item.quantity" @change="changeQuantity(index, $event)" integer></u-number-box>
					</view>
				</view>
			</view>
		</view>
		<view class="page-wrap order-reduced">
			<!-- <view class="reduced-item u-flex u-row-between u-border-bottom">
				<view class="left">
					<text>优惠券</text>
					<text class="label">已选一张</text>
				</view>
				<view class="right u-flex">
					<text class="price red">-¥ <text class="price-num">1000</text></text>
					<u-icon name="arrow-right" color="#676767" size="20"></u-icon>
				</view>
			</view> -->
			<view class="reduced-item integral u-flex u-row-between" v-if="orderTotalCredit">
				<view class="left">
					<text>积分</text>
					<!-- <text class="num">3676</text> -->
					<!-- <text class="tip">满1000可用</text> -->
				</view>
				<view class="right u-flex">
					<text class="price red" >- <text class="price-num">{{orderTotalCredit}}</text></text>
					<!-- <u-checkbox-group @change="integralCheckboxChange">
						<u-checkbox shape="circle" activeColor="#02AB35" name="integral" ></u-checkbox>
					</u-checkbox-group> -->
				</view>
			</view>
		</view>
		<view class="page-wrap total">
			<view class="total-item u-flex u-row-between u-border-bottom">
				<view class="left">
					商品金额
				</view>
				<view class="right red">
					¥ {{totalAmount}}
				</view>
			</view>
			<view class="total-item u-flex u-row-between">
				<view class="left">
					运费
					<text class="gray">总重：{{totalWeight}}</text>
				</view>
				<view class="right red">
					<text v-if="distribution.distributionPrice">+ ¥ {{distribution.distributionPrice}}</text>
					<text v-else>免运费</text>
				</view>
			</view>
		</view>
		<view class="cart-bottom">
			<view class="inner u-flex u-row-between">
				<view class="left u-flex">
					<view class="total-price">
						待支付：<text class="red">¥ {{payAmount + distribution.distributionPrice}}</text>
					</view>
				</view>
				<view class="btn gray" v-if="orderTotalCredit&&userTotalCredit<orderTotalCredit">积分不够</view>
				<view class="" v-else>
					<view class="btn" v-if="cansubmit" @click="submitOrder">去结算</view>
					<view class="btn gray" v-else>去结算</view>
				</view>
			</view>
		</view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
				cansubmit:true,
				fromPage:'',
				useIntegral:false,
				dataList:[],
				receiveId:'',
				receive:{},
				isDefaultAddr:false,
				orderInfo:{goodsList:[]},
				distribution:{},//物流信息
				totalAmount:null,//订单总金额
				payAmount:null,//订单支付金额
				userTotalBalance:null,//用户总余额
				userTotalCredit:null,//用户总积分
				orderTotalCredit:null,//订单需要的总积分
            }
        },
		onLoad(page) {
			// console.log('page',page);
			// console.log('this.creditGoods',this.creditGoods);
			this.fromPage = page.fromPage;
			// if(this.cartGoods>0&&this.fromPage!='cart'){
			// 	console.log('fromPagecart',this.fromPage);
			// 	this.orderInfo.goodsList = this.cartGoods;
			// }
			// if(this.creditGoods.length>0&&this.fromPage=='creditOrder'){
			// 	console.log('fromPagecreditOrder',this.fromPage);
			// 	this.orderInfo.goodsList = this.creditGoods;
			// }
			this.orderInfo.goodsList = this.cartGoods;
			this.settlement();
		},
		onShow() {
			if(this.fromPage=='addrlist'){
				this.settlement()
			}
			console.log('cartGoods===',this.cartGoods);
			
		},
		computed: {
			totalWeight() {
			  let that = this;
			  return this.orderInfo.goodsList.reduce((total, item) => {
					let weight = null;
					weight = item.weight
				  total += weight * item.quantity;
				return total;
			  }, 0);
			}
		},
        methods: {
			leftClick(e){
				console.log('leftClick',e);
			},
			integralCheckboxChange(e){
				this.useIntegral = e[0] && e[0] === 'integral' ? true : false;
			},
			selectAddr(){
				uni.$u.route('/center/addrlist', {
					from: 'settlement'
				});
			},
			// getAddrList(){
			// 	this.$u.api.addrList().then(res=>{
			// 		this.theAddr = res.data.rows;
			// 		let defaultAddress;
			// 		let firstAddress = res.data.rows[0];
			// 		 res.data.rows.forEach(address => {
			// 		  if (address.ifDefault) { // 如果有默认地址标识
			// 			defaultAddress = address;
			// 			this.isDefaultAddr = true;
			// 		  }
			// 		});
				
			// 		if (!defaultAddress) { // 如果没有默认地址标识
			// 		  defaultAddress = firstAddress;
			// 		}
			// 		this.theAddr = defaultAddress;
			// 	}).catch(err=>{
			// 		console.log('getAddrList',err.data);
			// 	})
			// },
			// 改变商品数量
			changeQuantity(index, value) {
				console.log('goodsList',this.orderInfo.goodsList);
				this.$nextTick(()=>{
					this.settlement();
				})
				
			},
			settlement(){
				let orderType = 1;
				// console.log('settlement',this.selectGoods);
				let param = {
					receiveId:this.receive.id
				};
				if(this.fromPage == 'creditOrder'){
					orderType = 2
				}
				param.orderType = orderType;
				param.goodsList = this.orderInfo.goodsList.map(item=>{
					return {goodsId:item.id||item.goodsId,quantity:item.quantity}
				});
				console.log('param',param);
				this.$u.api.getSettlement(param).then(res=>{
					console.log('res',res.data);
					this.setData(res.data)
					
				}).catch(err=>{
					console.log('getSettlement',err);
				})
			},
			setData(originData){
				console.log('originData',originData);
				let dataType = typeof originData;
				let jsonData;
				if(dataType=='string'){
					jsonData = JSON.parse(originData);
				}else{
					jsonData = originData
				}
				let {
					receive, 
					distribution, 
					totalAmount, 
					payAmount, 
					userTotalBalance, 
					userTotalCredit, 
					orderTotalCredit } = jsonData || {};
				console.log('orderTotalCredit',orderTotalCredit);
				this.orderInfo = jsonData;
				this.receive = receive;
				this.distribution = distribution;//物流信息
				this.totalAmount = totalAmount;//订单总金额
				this.payAmount = payAmount;//	订单支付金额
				this.userTotalBalance = userTotalBalance;//	用户总余额
				this.userTotalCredit = userTotalCredit;//	用户总积分
				this.orderTotalCredit = orderTotalCredit;//订单需要的总积分
			},
			submitOrder(){
				let that = this;
				this.cansubmit = false;
				let orderType = 1;
				let param = {
					receiveId:this.receive.id,
					distribution:this.distribution,
				};
				if(this.fromPage == 'creditOrder'){
					orderType = 2
				}
				param.orderType = orderType;
				param.goodsList = this.orderInfo.goodsList.map(item=>{
					return {goodsId:item.id,quantity:item.quantity}
				})
				//获取经纬度
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						param.latitude = res.latitude;
						param.longitude = res.longitude;
						that.$u.api.submitOrder(param).then(res=>{
							console.log('res',res.data);
							that.cansubmit = true;
							uni.$u.route('/shopping/pay', {
								orderId: res.data.orderId,
								fromPage:this.fromPage,
								payAmount:res.data.payAmount
							});
						}).catch(err=>{
							that.cansubmit = true;
							console.log('submitOrder',err);
						})
					},
				});
			}
        }
    }
</script>
<style>
	page{
		background-color: #F5F5F5;
		/* padding-top: 50px; */
	}
</style>
<style lang="scss" scoped>
.page-wrap{
	background-color: #fff;
	margin-bottom: 20rpx;
}
.addr{
	.top{
		margin-bottom: 16rpx;
		font-size: 26rpx;
		color: #999;
		.label{
			background-color: #FFEBEB;
			border: 1px solid #FF5F62;
			color: #FF5F62;
			padding: 5rpx 20rpx;
			border-radius: 30rpx;
			margin-right: 10rpx;
		}
	}
	.center{
		margin-bottom: 10rpx;
		font-size: 30rpx;
		color: #333;
		line-height: 50rpx;
		font-weight: 600;
	}
	.bottom{
		font-size: 30rpx;
		color: #666;
	}
}
.order-reduced{
	.reduced-item{
		&:not(:last-child){
			margin-bottom: 30rpx;
			padding-bottom: 30rpx;
		}
		.label{
			border-radius: 2px;
			border: 1px solid #FF3C3F;
			margin-left: 20rpx;
			font-size: 20rpx;
			color: #FF3C3F;
			padding: 0 10rpx;
		}
	}
	.integral{
		.num{
			font-size: 30rpx;
			color: #02AB35;
			font-weight: 600;
			margin-left: 30rpx;
			margin-right: 16rpx;
		}
		.tip{
			font-size: 24rpx;
			color: #999;
		}
		.price{
			margin-right: 10rpx;
		}
	}
}
.total{
	.total-item{
		&:not(:last-child){
			margin-bottom: 30rpx;
			padding-bottom: 30rpx;
		}
		.right{
			font-weight: 600;
		}
	}
	.gray{
		font-size: 24rpx;
		margin-left: 15rpx;
	}
}
.cart-bottom{
	height: 98rpx;
	.inner{
		position: fixed;
		background-color: #fff;
		height: 98rpx;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 0 20rpx;
		.total-price{
			font-size: 30rpx;
			color: #333;
			font-weight: 600;
			margin-left: 30rpx;
		}
		.btn{
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 50rpx;
			padding: 0 50rpx;
			background-color: #FF3C3F;
			color: #fff;
			text-align: center;
			&.gray{
				background-color: #ddd;
				color: #999;
			}
		}
	}
}
.product{
	.text{
		.name{
			height: auto;
		}
		.info{
			font-size: 24rpx;
			font-weight: 400;
			color: #666666;
		}
	}
}
</style>