xusfood_client/shopping/orderdetails.vue

<template>
    <view class="">
		<u-navbar
			:title="title"
			:placeholder="true"
			@leftClick="leftClick"
			:autoBack="true"
			 :safeAreaInsetTop="true"
		>
		</u-navbar>
		<u-loading-page :loading="loadingPage"></u-loading-page>
		<view class="page-wrap">
			<view class="box distribution u-flex u-row-between" 
			v-if="orderDetails.status>0"
			@click="$u.route('/shopping/distribution', {orderId: orderDetails.id})">
				<view class="left u-flex">
					<u--image :showLoading="false" :src="staticUrl+'/img/car.png'" width="48rpx" height="48rpx"></u--image>
					<view class="text">
						<view class="status">{{orderDetails.status|filterOrderState}}</view>
						<view>{{orderDetails.createTime}}</view>
					</view>
				</view>
				<u-icon name="arrow-right" color="#676767" size="24rpx"></u-icon>
			</view>
			<view class="box addr u-flex u-row-between">
				<view class="left">
					<view class="top">
						<text class="label" v-if="orderDetails.ifDefault">默认</text>{{orderDetails.address||''}}
					</view>
					<view class="center">{{orderDetails.receiveAdress}}</view>
					<view class="bottom">{{orderDetails.receiveName}} {{orderDetails.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="box order-product">
				<view class="product u-flex" v-for="(item,index) in orderDetails.detailList" :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">
								<text class="price">¥ <text class="price-num">{{item.price}}</text></text>
							</view>
							<u-number-box v-model="item.quantity" :disabled="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">
					<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" v-if="useIntegral">-¥ <text class="price-num">1000</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="box total">
				<view class="total-item u-flex u-row-between u-border-bottom">
					<view class="left">
						商品金额
					</view>
					<view class="right red">
						¥ {{orderDetails.originalOrderPrice}}
					</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="orderDetails.originalFreightPrice">+ ¥ {{orderDetails.originalFreightPrice}}</text>
						<text v-else>免运费</text>
					</view>
				</view>
			</view>
			<view class="box order-info page-wrap" v-if="orderDetails.status>0">
				<view class="order-info-item" v-for="(item,index) in orderInfo[orderDetails.status]" :key="index">
					<text class="til">{{item.name}}</text>
					<text class="con">
						<text v-if="item.key=='payType'">{{orderDetails[item.key]|filterPayType}}</text>
						<text v-else>{{orderDetails[item.key]}}</text>
					</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" v-if="orderDetails.status==0">
						待支付：<text class="red">¥ {{orderDetails.orderPrice}}</text>
					</view>
				</view>
				<!-- <view class="btn" @click="submitOrder">去结算</view> -->
				<view class="btn-wrap u-flex">
					<view
						class="btn"
						:class="btn.class"
						@click.stop="clickEven(btn.fun,orderDetails)"
						v-for="(btn,index) in statusBtn[orderDetails.status]" :key="index">
						{{btn.name}}
					</view>
				</view>
			</view>
		</view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
				loadingPage:true,
				id:'',
				title:'订单详情',
				orderDetails:{},
				fromPage:'',
				useIntegral:false,
				dataList:[],
				theAddr:{},
				isDefaultAddr:false,
				staticUrl:this.$commonConfig.staticUrl,
				statusBtn:{
					0:[{name:'取消订单',fun:'cancelOrder',class:''},{name:'去支付',fun:'pay',class:'red'}],
					1:[{name:'申请退款',fun:'refund',class:''}],
					2:[{name:'查看物流',fun:'logistics',class:''},{name:'确认收货',fun:'confirmReceipt',class:'green'}],
					3:[{name:'评价',fun:'evaluate',class:'green'}],
					// 4:[{name:'查看物流',fun:'logistics',class:''},{name:'评价',fun:'evaluate',class:'green'}],
					5:[{name:'查看退款',fun:'viewRefund',class:''}],
					// 6:[{name:'查看退款',fun:'viewRefund',class:'green'}],
					7:[{name:'查看退款',fun:'viewRefund',class:''}]
				},
				orderInfo:{
					0:[],
					1:[{name:'订单编号',key:'orderNum'},{name:'下单时间',key:'createTime'},{name:'支付方式',key:'payType'},{name:'支付时间',key:'payTime'}],
					2:[{name:'订单编号',key:'orderNum'},{name:'下单时间',key:'createTime'},{name:'支付方式',key:'payType'},{name:'支付时间',key:'payTime'}],
					3:[{name:'订单编号',key:'orderNum'},{name:'下单时间',key:'createTime'},{name:'支付方式',key:'payType'},{name:'支付时间',key:'payTime'}],
					4:[{name:'订单编号',key:'orderNum'},{name:'下单时间',key:'createTime'}],
					5:[{name:'订单编号',key:'orderNum'},{name:'下单时间',key:'createTime'},{name:'支付方式',key:'payType'},{name:'支付时间',key:'payTime'}],
					6:[{name:'订单编号',key:'orderNum'},{name:'下单时间',key:'createTime'},{name:'支付方式',key:'payType'},{name:'支付时间',key:'payTime'}],
					7:[{name:'订单编号',key:'orderNum'},{name:'下单时间',key:'createTime'},{name:'支付方式',key:'payType'},{name:'支付时间',key:'payTime'}],
				}
            }
        },
		onLoad(page) {
			// console.log('page',page);
			this.id = page.id;
		},
		onShow() {
			this.getOrderDetails(this.id);
		},
		computed:{
			payType(){
				return function(value){
					let payTypeList = ['', '微信', '余额', '积分']
					return '-' + payTypeList[value]
				}
			}
		},
        methods: {
			leftClick(){
				console.log('orderdetails leftClick');
			},
			getOrderDetails(id){
				this.$u.api.orderDetails({id:id}).then(res=>{
					this.loadingPage = false;
					this.orderDetails = res.data
					console.log('orderDetails',JSON.parse(JSON.stringify(res.data)));
				}).catch(err=>{
					console.log('getOrderDetails',err);
				})
			},
			clickEven(fun,item){
				// console.log('fun',fun);
				let funObj = {
				  pay: this.pay,
				  logistics:this.logistics,
				  evaluate:this.evaluate,
				  refund:this.refund,
				  cancelOrder:this.cancelOrder,
				  viewRefund:this.viewRefund,
				  confirmReceipt:this.confirmReceipt
				};
				// console.log('funObj[fun]',funObj[fun]);
				if (fun in funObj) {
				  funObj[fun](item);
				}
			},
			pay(item){
				console.log('pay',item);
				uni.$u.route('/shopping/pay', {
					orderId: item.id,
					// openid: that.vuex_wechatOpenid,
					payAmount:item.orderPrice
				});
			},
			logistics(item){
				// console.log('logistics',item);
				uni.$u.route('/shopping/distribution', {
					orderId: item.id
				});
			},
			evaluate(item){
				// console.log('logistics',item);
				uni.$u.route('/shopping/evaluate', {
					id: item.id
				});
			},
			refund(item){
				// console.log('logistics',item);
				uni.$u.route('/shopping/refund', {
					id: item.id
				});
			},
			cancelOrder(item){
				let that = this;
				uni.showModal({
				    title: '提示',
				    content: '确认取消吗！',
				    success: res => {
				        if (res.confirm) {
				            this.$u.api.cancelOrder({orderId:item.id}).then(res=>{
				            	this.$refs.uToast.show({
				            		message:res.msg,
				            		complete() {
				            			that.getOrderDetails(that.id);
				            		}
				            	});
				            	// uni.$u.toast(res.msg);
				            	console.log('res',res.data);
				            }).catch(err=>{
				            	console.log('cancelOrder',err);
				            })
				        }
				    }
				});
				// console.log('logistics',item);
				
			},
			viewRefund(item){
				uni.$u.route('/shopping/viewRefund', {
					orderId: item.id
				});
			},
			confirmReceipt(item){
				let that = this;
				uni.showModal({
				    title: '提示',
				    content: '确认收货吗！',
				    success: res => {
				        if (res.confirm) {
				            this.$u.api.confirmReceipt({orderId:item.id}).then(res=>{
								uni.showToast({
									title:res.msg,
									duration:2000,
									complete() {
										that.evaluate(item)
										that.getOrderDetails(that.id);
									}
								});
				            	console.log('res',res.data);
				            }).catch(err=>{
				            	console.log('confirmReceipt',err);
				            })
				        }
				    }
				})
			}
        }
    }
</script>
<style>
	page{
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
.box{
	margin-bottom: 20rpx;
	background-color: #fff;
	border-radius: 8rpx;
	padding: 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{
		padding-bottom: 30rpx;
		&:not(:last-child){
			margin-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{
			font-size: 26rpx;
			height: 64rpx;
			line-height: 64rpx;
			border-radius: 50rpx;
			padding: 0 40rpx;
			border: 1px solid #333;
			color: #333;
			text-align: center;
			background-color: transparent;
			margin-left: 10rpx;
			&.red{
				border-color: #FF3C3F;
				background-color: #FF3C3F;
				color: #fff;
			}
			&.green{
				border-color: #00A447;
				background-color: #00A447;
				color: #fff;
			}
		}
	}
}
.product{
	.text{
		.name{
			height: auto;
		}
		.info{
			font-size: 24rpx;
			font-weight: 400;
			color: #666666;
		}
	}
}
.order-info{
	.order-info-item{
		font-size: 30rpx;
		font-weight: 400;
		color: #333333;
		line-height: 42rpx;
		padding: 30rpx 20rpx;
		&:not(:last-child){
			border-bottom: 0.5px solid #eee;
		}
		.til{
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			margin-right: 90rpx;
		}
	}
}
.distribution{
	font-size: 24rpx;
	font-weight: 400;
	color: #00A447;
	line-height: 33rpx;	
	.text{
		margin-left: 16rpx;
	}
	.status{
		margin-bottom: 10rpx;
		font-size: 30rpx;
		font-weight: 600;
		color: #00A447;
		line-height: 38rpx;
	}
}
</style>