xusfood_client/shopping/submitorder.vue

<template>
    <view class="">
		<u-navbar
			title="提交订单"
			:placeholder="true"
			@leftClick="leftClick"
			:autoBack="true"
			 :safeAreaInsetTop="true"
		>
		</u-navbar>
		<view class="page-wrap receive-way u-flex">
			<view class="til">
				提货方式
			</view>
			<view class="way-item u-flex" @click="selectReceiveWay(index)" :class="{select:index==selectReceiveIndex}" v-for="(item,index) in receiveWayList" :key="item">
				<text class="icon"></text>
				<text class="text">{{item|filterLogisticsType}}</text>
			</view>
		</view>
		 <!-- v-if="logisticsType!=1" -->
        <view class="addr page-wrap u-flex u-row-between" @click="selectAddr" v-if="logisticsType!=1">
        	<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"></u-icon>
        </view>
		<view class="page-wrap pickup-info" v-else>
			<view class="item u-flex u-row-between"  @click="selectAddr">
				<view class="left">
					提货人：
					<text>{{pickupInfo.pickupName}}</text>
					<text>{{pickupInfo.pickupMobile}}</text>
				</view>
				<view class="right">
					<u-icon name="arrow-right" color="#676767" size="20"></u-icon>
				</view>
			</view>
			<view class="item u-flex u-row-between" @click="pickupTimeShow=true">
				<view class="left">
					预约提货时间：
					<text>{{pickupInfo.pickupTime}}</text>
				</view>
				<view class="right">
					<u-icon name="arrow-right" color="#676767" size="20"></u-icon>
				</view>
			</view>
			<view class="item u-flex u-row-between">
				<view class="left u-flex">
					<text style="flex: 1;white-space: nowrap;">自提地点：</text>
					<text class="ellipsis-1">{{pickupInfo.pickupAddress}}</text>
				</view>
				<view class="right">
					<u-icon  @click="goMap" :name="staticUrl+'/img/go-map-icon-y.png'" color="#676767" size="20"></u-icon>
				</view>
			</view>
		</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" 
							:max="item.stock" 
							:asyncChange="true"
							@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" v-if="logisticsType!=1">
				<view class="left">
					运费
					<!-- <text class="gray">总重：{{totalWeight}}</text> -->
				</view>
				<view class="right red">
					<text v-if="distribution.distributionPrice">+ ¥ {{distribution.distributionPrice}}</text>
					<text v-else>{{distribution.ifDistribution!=1?'该区域不支持配送':'免运费'}}</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">¥ {{logisticsType==1?payAmount: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="(logisticsType!=1?distribution.ifDistribution==1:true)&&cansubmit" @click="submitOrder">去结算</view>
					<view class="btn gray" v-else>去结算</view>
				</view>
			</view>
		</view>
		<u-datetime-picker
				:show="pickupTimeShow"
				v-model="pickupTime"
				@cancel="pickupTimeShow=false"
				:formatter="formatter"
				mode="datetime"
				:minDate="new Date().getTime()"
				@confirm="confirmDate"
		></u-datetime-picker>
		<!-- :maxDate="new Date().setDate(new Date().getDate() + 10)" -->
    </view>
</template>
<script>
    export default {
        data() {
            return {
				staticUrl:this.$commonConfig.staticUrl,
				cansubmit:true,
				fromPage:'',
				useIntegral:false,
				dataList:[],
				receiveId:'',
				receive:{},
				isDefaultAddr:false,
				orderInfo:{goodsList:[]},
				distribution:{},//物流信息
				totalAmount:null,//订单总金额
				payAmount:null,//订单支付金额
				userTotalBalance:null,//用户总余额
				userTotalCredit:null,//用户总积分
				orderTotalCredit:null,//订单需要的总积分
				receiveWayList:[],//
				selectReceiveIndex:0,
				logisticsType:0,//物流方式默认值
				pickupInfo:{
					pickupName:'',
					pickupMobile:'',
					pickupTime:'',
					pickupAddress:'',
					pickupLongitude:'',
					pickupLatitude:''
				},
				pickupTime:'',
				pickupTimeShow:false,
            }
        },
		onLoad(page) {
			console.log('page',page);
			// console.log('this.creditGoods',this.creditGoods);
			this.fromPage = page.fromPage;
			console.log('fromPage',this.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;
			console.log('this.buyNowGoods',this.buyNowGoods);
			if(this.buyNowGoods.length>0&&this.fromPage=='productdetails'){
				console.log('fromPagecart',this.fromPage);
				this.orderInfo.goodsList = this.buyNowGoods;
			}
			this.settlement();
			// 默认提货时间
			let now = Number(new Date());
			this.pickupInfo.pickupTime = uni.$u.timeFormat(now, 'yyyy-mm-dd  hh:MM:ss');
			this.pickupTime = now;
			//商行信息
			this.getIntro();
		},
		onUnload() {
		    this.$u.vuex('buyNowGoods',[]);
			console.log('this.buyNowGoods',this.buyNowGoods);
		},
		onShow() {
			if(this.fromPage=='addrlist'){
				this.settlement()
			}
			// console.log('cartGoods===',this.cartGoods);
		},
		watch: {
		  // selectReceiveIndex: {
		  //   handler: function(newValue, oldValue) {
			 //  console.log('selectReceiveIndex',newValue);
		  //     this.logisticsType = this.receiveWayList[newValue];
			 //  console.log('logisticsType',this.logisticsType);
			 //  if(this.orderInfo.goodsList.length>0){
				//   this.settlement();
			 //  }
		  //   },
		  //   immediate: true
		  // }
		},
		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: {
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			confirmDate(e){
				this.pickupTimeShow = false;
				this.pickupInfo.pickupTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd  hh:MM:ss');
				this.pickupTime = e.value;
				// console.log('pickupTime',this.pickupInfo.pickupTime);
			},
			getIntro(){
				this.$u.api.xsGetIntro().then(res=>{
					// console.log('xsGetIntro',res.data);
					this.pickupInfo.pickupAddress = res.data.shopAddress;
					this.pickupInfo.pickupLongitude = res.data.shopLongitude;
					this.pickupInfo.pickupLatitude = res.data.shopLatitude;
				}).catch(err=>{
					console.log('xsGetIntro',err.data);
				})
			},
			goMap(){
				uni.openLocation({
				  latitude:this.pickupInfo.pickupLatitude,	//维度
				  longitude: this.pickupInfo.pickupLongitude, //经度
				  name: "商行地址",	//目的地定位名称
				  scale: 15,	//缩放比例
				  address: this.pickupInfo.pickupAddress	//导航详细地址
				})
			},
			leftClick(e){
				console.log('leftClick',e);
			},
			integralCheckboxChange(e){
				this.useIntegral = e[0] && e[0] === 'integral' ? true : false;
			},
			selectAddr(){
				uni.$u.route('/center/addrlist', {
					from: 'submitorder',
					// backUrl:'/shopping/submitorder'
				});
			},
			// 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);
				// console.log('index',index);
				// console.log('value',value);
				this.orderInfo.goodsList[index].quantity = value.value;
				this.settlement();
			},
			settlement(){
				let orderType = 1;//1，正常订单，2积分订单
				// console.log('settlement',this.selectGoods);
				let param = {
					receiveId:this.receive.id
				};
				if(this.fromPage == 'creditOrder'){
					orderType = 2
				}
				param.orderType = orderType;
				// param.logisticsType = this.logisticsType;
				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, 
					logisticsType,
					orderTotalCredit } = jsonData || {};
				this.receiveWayList = logisticsType.split(",");//支持的物流方式
				this.logisticsType = this.receiveWayList[this.selectReceiveIndex];
				// console.log('orderTotalCredit',orderTotalCredit);
				// console.log('receive',receive);
				this.orderInfo = jsonData;
				this.receive = receive;
				this.distribution = distribution;//物流信息
				this.totalAmount = totalAmount;//订单总金额
				this.payAmount = payAmount;//	订单支付金额
				this.userTotalBalance = userTotalBalance;//	用户总余额
				this.userTotalCredit = userTotalCredit;//	用户总积分
				this.orderTotalCredit = orderTotalCredit;//订单需要的总积分
				// pickupInfo
				this.pickupInfo.pickupName = receive.receiveName;
				this.pickupInfo.pickupMobile = receive.receivePhone;
				// console.log('pickupInfo',this.pickupInfo);
			},
			submitOrder(){
				let that = this;
				this.cansubmit = false;
				let orderType = 1;
				let param = {
					receiveId:this.receive.id,
					distribution:this.distribution,
					logisticsType:this.logisticsType,
					pickupInfo:this.pickupInfo,
				};
				if(this.fromPage == 'creditOrder'){
					orderType = 2
				}
				param.orderType = orderType;
				param.goodsList = this.orderInfo.goodsList.map(item=>{
					return {goodsId:item.id,quantity:item.quantity}
				})
				console.log('submitOrder param',param);
				//获取经纬度
					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;
								if(res.data.payAmount>0){
									uni.$u.route('/shopping/pay', {
										orderId: res.data.orderId,
										fromPage:that.fromPage,
										payAmount:res.data.payAmount
									});
								}else{
									uni.$u.route('/shopping/paysuccess', {
										fromPage:'nocash'
									});
								}
							}).catch(err=>{
								that.cansubmit = true;
								console.log('submitOrder',err);
							})
						},
						fail: (err) => {
							console.log('getLocationfail',err);
							that.cansubmit = true;
							uni.$u.toast('请允许获取地理位置，以便更好的服务')
						},
						complete(e) {
							console.log('getLocation complete',e);
						}
					});
				
			},
			selectReceiveWay(index){
				this.selectReceiveIndex = index;
				this.logisticsType = this.receiveWayList[index];
				// console.log('logisticsType',this.logisticsType);
				// if(this.orderInfo.goodsList.length>0){
				// 	this.settlement();
				// }
				// console.log('selectReceiveWay index',index);
				// console.log('selectReceiveWay',this.receiveWayList[index]);
				// console.log('pickupInfo',this.pickupInfo);
			}
        }
    }
</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{
		padding-bottom: 30rpx;
		&:not(:last-child){
			margin-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;
		}
	}
}
.receive-way{
	margin-top: 20rpx;
	font-size: 30rpx;
	font-weight: 400;
	color: #333333;
	.til{
		
	}
	.way-item{
		margin-left: 50rpx;
		.icon{
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			box-sizing: border-box;
			border: 2px solid #ccc;
			margin-right: 10rpx;
		}
		&.select{
			.icon{
				background-color: #00A447;
				border-color: #00A447;
			}
		}
	}
	
}
</style>