xusfood_client/shopping/orderdetails.vue

<template>
    <view class="">
		<u-navbar
			:title="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="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="order-product page-wrap">
			<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="page-wrap 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="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 {
				id:'',
				title:'订单详情',
				orderDetails:{},
				fromPage:'',
				useIntegral:false,
				dataList:[],
				theAddr:{},
				isDefaultAddr:false,
				statusBtn:{
					0:[{name:'取消订单',fun:'cancel ',class:'cancel'},{name:'去支付',fun:'pay',class:'red'}],
					1:[{name:'申请退款',fun:'refund',class:'green'}],
					2:[{name:'查看物流',fun:'logistics',class:''},{name:'确认收货',fun:'confirmReceipt',class:'green'}],
					3:[{name:'查看物流',fun:'logistics',class:''},{name:'评价',fun:'evaluate',class:'green'}],
					// 4:[{name:'查看物流',fun:'logistics',class:''},{name:'评价',fun:'evaluate',class:'green'}],
					5:[{name:'查看退款',fun:'viewRefund',class:'green'}],
					// 6:[{name:'查看退款',fun:'viewRefund',class:'green'}],
					// 7:[{name:'查看退款',fun:'viewRefund',class:'green'}]
				}
            }
        },
		onLoad(page) {
			console.log('page',page);
			this.id = page.id;
			this.getOrderDetails(this.id);
		},
		onShow() {
		},
        methods: {
			leftClick(){
				console.log('orderdetails leftClick');
			},
			getOrderDetails(id){
				this.$u.api.orderDetails({id:id}).then(res=>{
					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
				};
				if (fun in funObj) {
				  funObj[fun](item);
				}
			},
			pay(item){
				console.log('pay',item);
				uni.$u.route('/shopping/pay', {
					orderId: this.orderDetails.id,
					// openid: that.vuex_wechatOpenid,
					payAmount:this.orderDetails.orderPrice
				});
			},
        }
    }
</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{
		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;
			}
		}
	}
}
.product{
	.text{
		.name{
			height: auto;
		}
		.info{
			font-size: 24rpx;
			font-weight: 400;
			color: #666666;
		}
	}
}
</style>