sct/pagesT/pointsMall/ExchangeOrderDetail.vue

<template>
	<view style="height: 100%;" :class="['qn-page-' + theme]">
		<u-navbar v-if="navFixed" title="订单详情" title-color="#ffffff" back-icon-color="#ffffff" :border-bottom="false" :background="{ backgroundImage: primaryJb }"></u-navbar>
		<view class="box" v-if="order_detail.id">
			<view class="top-view" :style="{ background: primaryJb }">
				<uniStatusBar></uniStatusBar>
				<view class="nav-bar">
					<text @click="backPage" class="ibonfont ibonfanhui nv-back"></text>
					<text class="title-text">订单详情</text>
				</view>
				<view class="order-status-view clearfix">
					<view class="float_left">
						<view class="order-status-text">
							<text>{{
										 order_detail.status === 4
										? '待发货'
										: order_detail.status === 5
										? '已完成'
										: order_detail.status === 6
										? '已关闭'
										: ''
								}}</text>
							<view class="children-order-status">
								{{
										 order_detail.status === 4
										? '正在紧急备货中！'
										: order_detail.status === 5
										? '本次交易已完成，祝您购物愉快'
										: order_detail.status === 6
										? '本次交易已关闭'
										: ''
								}}
							</view>
						</view>
					</view>
					<view class="float_right">
						<text
							class="ibonfont order-icon"
							:class="[
							 order_detail.status === 4
									? 'ibondaifahuo1'
									: order_detail.status === 5
									? 'ibonyiwancheng'
									: order_detail.status === 6
									? 'ibonjiaoyiguanbix'
									: ''
							]"
						></text>
					</view>
				</view>
			</view>
			<!-- 收货地址 -->
			<view class="address-view model-box clearfix">
				<text class="ibonfont ibonicon-test ad-icon primary-bg"></text>
				<view>
					<text class="title">{{ address.name }} {{ address.mobile }}</text>
					<br />
					<text class="subtitle">地址：{{ address.area.provinceName }}{{ address.area.cityName }}{{ address.area.districtName }}{{ address.address }}</text>
				</view>
			</view>
			<!-- 商品信息 -->
			<view class="goods-view view-main">
					<view class="goods-li clearfix" @click="goPage(`/pagesTwo/goods/GoodsDetail?id=${it.id}`)">
						<image class="goods-img float_left" :src="order_detail.images[0]" mode="aspectFit"></image>
						<view class="float_right goods-right">
							<view class="goods-name ellipsis">{{ order_detail.integralGoodsName }}</view>
							<view class="goods-price clearfix">
								<view class="float_left">
									<text class="price primary-color">
										<text>{{ order_detail.integral }}股权</text>
									</text>
								</view>
								<view class="float_right">
									<u-icon name="close" size="18"></u-icon>
									<text class="goods-num">{{ order_detail.num }}</text>
								</view>
							</view>
						</view>
					</view>
			</view>
			
			<view class="view-main order-info-view">
				<view class="order-info-tit">订单信息</view>
				<view class="order-info-cont">
					<view class="order-info-li">
						<view class="clearfix info-item">
							<text class="subtitle float_left">订单编号：</text>
							<text class="money-val float_right">{{ order_detail.no }}</text>
						</view>
						<view class="clearfix info-item">
							<text class="subtitle float_left">下单时间：</text>
							<text class="money-val float_right">{{order_detail.createTime}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="view-main order-info-view">
				<view class="order-price-view">
					<span>合计：</span>
					<span class="price primary-color">{{ order_detail.amount }}股权</span>
				</view>
			</view>
			<view class="view-main order-info-view" v-if="order_detail.remark">
				<view class="order-info-tit">买家留言</view>
				<view style="font-size: 26upx;">{{ order_detail.remark || '--' }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniStatusBar from '@/components/uni-status-bar/uni-status-bar.vue';

export default {
	components: {
		uniStatusBar
	},
	data() {
		return {
			navFixed: false,
			express_list: [],
			order_id: 0,
			price: '',
			selfRuleData: {},
			order_detail: {},
			no: '',
			// 再次购买的goodsData
			goodsData: [],
			address: {}
		};
	},
	async onLoad(options) {
		this.order_id = options.id;
		await this.getIntegralGoodsExchangeInfo();
	},
	onPageScroll(val) {
		this.navFixed = val.scrollTop > 5;
	},
	methods: {
		// 获取订单详情
		async getIntegralGoodsExchangeInfo() {
			await this.$u.api.getIntegralGoodsExchangeInfo(this.order_id).then(res => {
				this.order_detail = {
					...res.data,
					createTime: this.$u.timeFormat(res.data.createTime,'yyyy-mm-dd hh:MM:ss')
				};
				if(Array.isArray(res.data.address)){
					this.address = res.data.address[0];
				}else{
					this.address = res.data.address;
				}
				this.price = this.order_detail.totalMoney;
				this.no = this.order_detail.no;
			});
		}
	}
};
</script>

<style lang="scss">
.top-view {
	background: linear-gradient(315deg, #fe4542, #ff7e44);
	.nav-bar {
		padding: 24upx 0;
		position: relative;
		.nv-back {
			position: absolute;
			top: 24upx;
			left: 24upx;
			font-size: 32upx;
			color: #ffffff;
			display: block;
		}
		.title-text {
			font-size: 32upx;
			color: #fff;
			display: inline-block;
			width: 100%;
			text-align: center;
			height: 40upx;
		}
	}

	.order-status-view {
		color: #fff;
		font-size: 36upx;
		padding: 40upx;
		.order-icon {
			margin-right: 10upx;
			font-size: 80upx;
			opacity: 0.9;
		}
		.children-order-status {
			font-size: 24upx;
			font-weight: 300;
			padding-top: 10upx;
		}
	}
}

.box {
	width: 100%;
	// overflow-y: scroll;
	padding-bottom: 140upx;
	// height: 100%;
	// margin-bottom: 130upx;
	background: #f5f9fc;

	.view-main {
		background: #fff;
		padding: 24upx;
		width: 706upx;
		margin: 20upx auto 0;
		border-radius: 10upx;
	}

	.goods-view {
		padding: 24upx 0;
		.shop-name {
			color: #333;
			font-weight: bold;
			font-size: 24upx;
			padding: 0 24upx 24upx;
			line-height: 30upx;
			.shop-logo {
				width: 30upx;
				height: 30upx;
				vertical-align: middle;
				margin-right: 10upx;
			}
			.order-status {
				color: $uni-color-primary;
			}
		}

		.goods-li:last-child {
			margin-bottom: 0;
		}
		.goods-li {
			padding: 30upx 20upx;
			margin-bottom: 20upx;
			.goods-img {
				width: 124upx;
				height: 124upx;
				border-radius: 10upx;
			}
			.goods-right {
				width: 520upx;
				margin-left: 20upx;
				.goods-name {
					color: #333;
					font-size: 28upx;
				}
				.goods-descrip {
					font-size: 22upx;
					color: #999;
					padding: 10upx 0;
				}
				.goods-price {
					.price {
						color: $price-color;
						font-size: 28upx;
						text {
							font-weight: bold;
						}
					}
					.sku {
						font-size: 22upx;
						color: #666;
					}
					.icon-jia {
						color: #666;
						font-size: 24upx;
					}
					.goods-num {
						font-size: 24upx;
						font-weight: bold;
					}
				}
			}
		}
	}
}
.model-box {
	width: 706upx;
	margin: 20upx auto 0;
	border-radius: 10upx;
}
.address-view {
	font-size: 32upx;
	position: relative;
	padding: 24upx;
	padding-left: 100upx;
	margin-bottom: 24rpx;
	background: #fff;
	.subtitle {
		font-size: 24upx;
		color: #6c6c6c;
	}
	.ad-icon {
		position: absolute;
		top: 50%;
		left: 24upx;
		font-size: 36upx;
		transform: translateY(-50%);
		display: block;
		width: 60upx;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		border-radius: 100%;
		color: #ffffff;
		background-color: #fe4543;
	}
	.ibonjinru-icon {
		position: absolute;
		top: 50%;
		right: 14upx;
		color: #999999;
		font-size: 28upx;
		transform: translateY(-50%);
	}
}
.express-view {
	.title {
		color: #2b85e4;
	}
	.ad-icon {
		font-size: 34rpx;
		background-color: #2b85e4;
	}
}
.order-info-view {
	// font-size: 24upx;
	color: #3c3c3c;
	.order-info-tit {
		font-size: 28upx;
		padding-bottom: 20upx;
	}
	.order-info-cont {
		font-size: 24upx;

		.info-item {
			line-height: 56upx;
			.subtitle {
				color: #666;
			}
			.money-val {
				font-size: 26upx;
			}
		}
	}
	.order-info-li {
		border-bottom: 1upx solid #f4f4f4;
		padding-bottom: 24upx;
		margin-bottom: 24upx;
		.info-item {
			line-height: 56upx;
			.subtitle {
				color: #666;
			}
		}
		&:last-child {
			margin-bottom: 0;
			border-bottom: 0 none;
			padding-bottom: 0;
		}
	}

	.order-price-view {
		text-align: right;
		font-size: 26upx;
		.price {
			color: $price-color;
			padding-left: 6upx;
			font-size: 32upx;
			font-weight: 600;
		}
	}
}

.botton-btn-view {
	background: #fff;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 20upx;
	font-size: 28upx;
	border-top: 1px solid #f4f4f4;
	text-align: right;
	.btnS {
		display: inline-block;
		min-width: 120upx;
		line-height: 50upx;
		padding: 0 20upx;
		color: #333;
		text-align: center;
		margin-right: 10upx;
		height: 50upx;
		font-size: 24upx;
		border-radius: 10upx;
		border: 1px solid #ccc;
	}
	.pay {
		border-color: $uni-color-primary;
		color: $uni-color-primary;
	}
}

.circleSty {
	display: inline-block;
	background-color: #9e9e9e;
	width: 20upx;
	height: 20upx;
	border-radius: 50%;
	margin-left: 20upx;
}

.subOrder {
	position: absolute;
	top: -10upx;
	left: 60upx;
}
</style>