CBB3/pages/user/order/detail/detail.vue

<style lang="less">
	.order-bg{
		background: linear-gradient(180deg, #ef4034 0%, rgba(1, 149, 96, 0.00) 100%);
		width: 100%;
		height: 440rpx;
		position: fixed;
	}
	
	page {
		background: #F5F5F5;
	}
	
	.app-body{
		position: relative;
		z-index: 1;
		padding: 10px;
		
		.address-info{
			border-radius: 10px;
			background: #FFF;
			padding: 12px;
			.icon{
				image{width: 30px;height: 30px;}
			}
			.info{width: calc(100% - 40px);margin-left: 10px;}
			.p-title{
				.p-name{color: #000;font-size: 14px;}
				.p-tel{font-size: 12px;color: #ccc;margin-left: 10px;}
			}
			.address{font-size: 14px;color:#000;}
		}
		
		.goods{
			background: #FFF;
			margin-top: 10px;
			border-radius: 10px;
			padding: 12px;
			.goods-item{
				margin-bottom: 20px;
				.img{
					width: 90px;height: 90px;
					image{width: 100%;height:100%;margin-right: 15px;border-radius: 10px;}
				}
				.item{
					width: calc(100% - 105px);
					margin-left: 15px;
					.title{
						width: 100%;
						color: #484747;
						font-size: 14px;
						font-weight: 600;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
					.tag{
						font-size: 12px;
						color: #AFAFAF;
						font-size: 400;
					}
					.price{
						color: #f1851e;
						font-size: 18px;
						font-weight: 600;
					}
					.old-price{
						color: #7E7E7E;
						font-size: 10px;
						text-decoration: line-through;
						margin-left: 5px;
					}
					.xc{
						color: #7E7E7E;
						font-size: 10px;
					}
				}
			}
		}
	
		.detail-item{
			padding: 0 15px;
			height: 50px;
			background-color: #fff;
			margin-top: 10px;
			display: flex;
			align-items: center;
			color: #3F3E3E;
			font-size: 14px;
			border-radius: 10px;	
		}
		
		.detail-items{
			background-color: #fff;
			border-radius: 10px;
			margin-top: 10px;
			.item{
				padding: 0 15px;
				height: 50px;
				display: flex;
				align-items: center;
				color: #3F3E3E;
				font-size: 14px;
				.pw-right{
					margin-left: auto;
					color: #7E7E7E;
				}
			}
		}
		
	}
	
	.zfen-view{height: 18px;}
	.zfen-view .zfen{
		overflow: hidden;
		text-overflow:ellipsis;    
		white-space: nowrap;
		color: #ef4034;font-size: 10px;border: 1px solid #ef4034;padding: 0px 2px;display: inline-block;vertical-align:top;border-radius: 2px;}
	.zfen-view .zfen text{font-weight: bold;margin: 0px 1px;}
	
	.pay-btn{
		position: fixed;
		height: 60px;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		background-color: #fff;
		.bp-left{
			color: #7E7E7E;
			font-size: 16px;
		}
		.bp-left text:last-child{
			color: #f1851e;
			font-weight: 500;
		}
		
		.bp-right{
			width: 140px;
			height: 40px;
			text-align: center;
			line-height: 40px;
			color: #fff;
			background: #ef4034;
			border-radius: 100px;
			font-size: 16px;
			margin: 0 15px 0 20px;
		}
	}
</style>
<template>
	<view >
		<view class="order-bg"></view>
		<view class="app-body">
			<view id="mtop">
				<uni-nav-bar color="#fff" :border="false" statusBar backgroundColor="transparent" left-icon="left" @clickLeft="utils.navigateBack()" fixed title="订单详情"></uni-nav-bar>
			</view>
			<scroll-view v-if="order != null" scroll-y  :style="'height:calc(100vh - ' + topHeight + 'px - ' + h5Foot + 'px)'">
				<view class="address-info fx-r fx-bc">
					<view class="icon"><image src="/static/img/shop-address.png"></image></view>
					<view class="info">
						<view class="p-title">
							<text class="p-name">{{order.name}}</text>
							<text class="p-tel">{{order.tel}}</text>
						</view>
						<view class="address">{{order.address}}</view>
					</view>
				</view>
				
				<view class="goods">
					<view class="goods-item fx-r" v-for="(v,k) of order.info" :key="k">
						<view class="img">
							<image :src="v.img" mode="aspectFill"></image>
						</view>
						<view class="item">
							<view class="title">{{v.title}}</view>
							<view class="tag">{{v.sku_text}}</view>
							<view class="prices fx-r fx-bc">
								<view class="price">¥{{v.price}}</view>
								<view class="old-price">¥{{v.old_price}}</view>
								<view class="fx-g1"></view>
								<view class="xc">x{{v.count}}</view>
							</view>
						</view>
					</view>
					
				</view>
				
				<view class="detail-item fx-r">
					<view class="title">物流方式</view>
					<view class="fx-g1"></view>
					<view class="value">包邮</view>
				</view>
				<view class="detail-items">
					<view class="item">
						<view class="pw-left">订单编号</view>
						<view class="pw-right">{{order.order_id}}</view>
					</view>
					<view class="item" v-if="order.express_num">
						<view class="pw-left">物流单号</view>
						<view class="pw-right">{{order.express_num}}</view>
					</view>
					<view class="item">
						<view class="pw-left">订单状态</view>
						<view class="pw-right">
							<view v-if="order.status == 0">未付款</view>
							<view v-if="order.status == 1">买家已付款</view>
							<view v-if="order.status == 2">卖家已发货</view>
							<view v-if="order.status == 3">买家已收货</view>
							<view v-if="order.status == -1">订单已关闭</view>
						</view>
					</view>
					<view class="item">
						<view class="pw-left">下单时间</view>
						<view class="pw-right">{{order.time}}</view>
					</view>
					
					<view class="item">
						<view class="pw-left">订单总金额</view>
						<view class="pw-right">{{order.allmoney}}</view>
					</view>
					
					<view class="item">
						<view class="pw-left">提货积分抵扣</view>
						<view class="pw-right" style="color: #f1851e;font-weight: bold;">{{order.balance}}</view>
					</view>
					
					<view class="item">
						<view class="pw-left">实付金额</view>
						<view class="pw-right" >{{order.pay_money}}</view>
					</view>
					
					<view class="item" v-if="order.pay_time != ''">
						<view class="pw-left">支付时间</view>
						<view class="pw-right">{{order.pay_time}}</view>
					</view>
					<view class="item" v-if="order.fa_time != ''">
						<view class="pw-left">发货时间</view>
						<view class="pw-right">{{order.fa_time}}</view>
					</view>
					<view class="item" v-if="order.ok_time != ''">
						<view class="pw-left">收货时间</view>
						<view class="pw-right">{{order.ok_time}}</view>
					</view>
				</view>
				
				
				<view style="height: 60px;"></view>
			</scroll-view>
			
			
			<view v-if="order != null">
				<view v-if="order.status == 0">
					<view class="pay-btn">
						<view class="bp-left">
							<text>共：</text>
							<text>¥{{order.pay_money}}</text>
						</view>
						<view class="bp-right" @click="toPayClick()">立即购买</view>
					</view>
				</view>
				
				<view v-if="order.status == 2">
					<view class="pay-btn">
						<view class="bp-right" @click="flowClick()">查看物流</view>
					</view>
				</view>
			</view>
			
		</view>
		
		<ui-check-pay ref="checkpay"></ui-check-pay>
	</view>
</template>

<script>
	import uiCheckPay from '@/components/ui-pay/pay.vue';
	export default {
		components: {
			uiCheckPay
		},
		data() {
			return {
				order:null,
				order_id:0,
				topHeight : 50,
				h5Foot : 0
			}
		},
		onLoad(options) {
			this.order_id = options.id;
			this.get_order_info();
			// #ifdef H5
				this.h5Foot = 50;
			// #endif
		},
		methods: {
			// 我的订单详情
			get_order_info(){
				uni.showLoading({ title: '获取数据中..' });
				this
					.request
					.post("userOrderInfo",{id:this.order_id})
					.then(res=>{
						uni.hideLoading();
						if(res.code == 200) {
							this.order = res.data;
							this.$nextTick(()=>{
								uni.createSelectorQuery().in(this)
								.select("#mtop").boundingClientRect(res=>{
									this.topHeight = res.height;
								}).exec();
							});
						} else {
							uni.showModal({title: '系统提示',content: res.msg,showCancel: false});
						}
					})
					.catch(err=>{
						uni.hideLoading();
						uni.showModal({title: '系统提示',content: '加载失败，返回在尝试',showCancel: false});
					});
			},
			// 查看物流
			flowClick() {
				uni.navigateTo({
					url: `../flow/flow?id=${this.order_id}&orderId=${this.order.order_id}&path_img=${this.order.info[0].img}`
				})
			},
			// 去支付
			toPayClick() {
				this.$refs.checkpay.show(this.order.order_id,()=>{
					this.$refs.checkpay.hide();
				});
			},
		}
	}
</script>