medicine-xcx/pages/my/order/details/index.vue

<template>
	<view>
		<!-- 收获地址 -->
		<view class="address_box" v-if="Object.keys(order).length>0">
			<view class="name_box">
				<text class="name_title">收货人：</text>
				<text class="user_name">{{order.addressName}}</text>
				<text class="phone">{{order.addressPhone }}</text>
			</view>
			<view class="address">
				<image :src="IMG_URL +'address_positions.png'" mode=""></image>
				<text>{{order.address + order.addressDetail}}</text>
			</view>
		</view>
		<!-- 商品信息 -->
		<view class="order_box" v-if="Object.keys(order).length>0">
			<view class="item">
				<view class="time">
					<text class="time_text">{{order.createTime}}</text>
					<view class="phone" @click="call(order.addressPhone)">一键拨号</view>
				</view>
				<view class="goods_item" v-for="item in orderDetailList" :key="item.id">
					<image :src="item.goodPic2" mode=""></image>
					<view class="right_box flex-1">
						<text class="title">{{item.goodName}}</text>
						<view class="center_box">
							<view class="money_box">
								<!-- <text class="min red"></text> -->
								<text class="bigs red">￥{{item.goodPrice}}</text>
							</view>
							<!-- <text class="back_money">再返消费金￥{{item.getPrice}}</text> -->
							<text class="back_iconx">×{{item.goodNum}}</text>
						</view>
						<text>{{item.goodSku}}</text>
					</view>
				</view>
				<view class="total_box">
					<text class="sum_back_momey" v-if="status !== 4 && order.giveMoneySum">总消费金￥ +{{order.giveMoneySum}} {{order.giveIntegerSum ? '总兑购金'+order.giveIntegerSum +'元': ''}}</text>
					<text class="text_price">合计</text>
					<text class="price">￥{{order.payMoney}}</text>
				</view>
			</view>
			<template  v-if="status == 4">
				<view class="row">
					<text class="text_title">售后原因：</text>
					<view class="text_right">
						<text style="margin-right: 20rpx;">{{select_text}}</text>
						<u-icon name="arrow-down" color="#707070"></u-icon>
					</view>
				</view>
				<view class="parse_box">
					{{}}
				</view>
				<view class="pic_box">
					<image ></image>
				</view>
			</template>
			
			
		</view>
		
	
	</view>
</template>

<script>
	import { IMG_URL } from '@/env.js';
	export default {
		data() {
			return {
				id: '',
				status: null,
				IMG_URL,
				goodsInfo: {},
				order: {},
				orderDetailList: []
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.status = options.status;
			this.getDetele(options.id)
		},
		methods: {
			call(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
					success(res) {
						
					},
					fail(err) {
						
					}
				})
			},
			// 获取订单详情
			getDetele(id){
				uni.showLoading();
				this.$api('oneOrderById',{id}).then(res => {
					let { code, result, message} = res;
					if(code == 200) {
						this.$Toast(result);
						console.log(result)
						this.order = result.order
						result.orderDetailList.forEach(item => {
							item.goodPic2 = item.goodPic == null? "": item.goodPic.split(',')[0];
						})
						this.orderDetailList = result.orderDetailList
						uni.hideLoading()
					}else {
						uni.hideLoading()
						this.$Toast(message);
					}
				}).catch(err => {
					uni.hideLoading()
					this.$Toast(err.message);
				})
			},
			todetails() {
				uni.navigateTo({
					url: "/pagesA/my_other_list/webmaster/after_sales_order/after_sales_order_details/after_sales_order_details"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.address_box {
		width: 711rpx;
		margin: 13rpx auto 0;
		padding-bottom: 20rpx;
		border-radius: 14rpx;
		box-shadow: 0 3rpx 6rpx 0 rgba(0, 0, 0, 0.3);

		.name_box {
			padding-top: 34rpx;
			margin-left: 23rpx;
			display: flex;

			.name_title {
				font-size: 28rpx;
				color: #707070;
				line-height: 74rpx;
			}

			.user_name {
				width: 231rpx;
				height: 74rpx;
				line-height: 74rpx;
				padding-left: 14rpx;
				box-sizing: border-box;
				background-color: #F5F5F5;
				color: #000000;
				font-size: 28rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.phone {
				width: 318rpx;
				height: 74rpx;
				margin-left: 12rpx;
				line-height: 74rpx;
				padding-left: 24rpx;
				box-sizing: border-box;
				background-color: #F5F5F5;
				color: #000000;
				font-size: 28rpx;
			}
		}

		.address {
			display: flex;
			margin-top: 53rpx;
			margin-left: 23rpx;

			image {
				width: 32rpx;
				height: 42rpx;
			}

			text {
				display: flex;
				margin-left: 24rpx;
				width: 478rpx;
				font-size: 28rpx;
				color: #707070;
			}
		}
	}

	.order_box {
		margin-top: 22rpx;
		padding-bottom: 20rpx;

		.item {
			width: 711rpx;
			margin: 0 auto;
			border-radius: 24rpx;
			padding-bottom: 18rpx;
			box-shadow: 0 3rpx 6rpx 0 rgba(0, 0, 0, 0.3);

			.time {
				width: 648rpx;
				margin: 0 auto;
				padding-top: 34rpx;
				padding-bottom: 15rpx;
				border-bottom: 1px solid rgba(112, 112, 112, 0.2);
				display: flex;
				justify-content: space-between;
				font-size: 32rpx;

				.time_text {
					color: #333;
				}

				.phone {
					color: #01AEEA;
				}
			}

			.goods_item {
				display: flex;
				width: 648rpx;
				margin: 0 auto;
				margin-top: 22rpx;
				padding-bottom: 26rpx;
				border-bottom: 1px solid rgba(112, 112, 112, 0.2);

				&:last-child {
					border-bottom: none;
				}

				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 20rpx;
				}

				.right_box {
					display: flex;
					flex-direction: column;
					font-size: 26rpx;
					margin-left: 25rpx;

					.title {
						color: #000;
						font-size: 33rpx;
					}

					.center_box {
						display: flex;
						justify-content: space-between;
						color: #01AEEA;
						font-size: 32rpx;
						.back_iconx{
							font-size: 38rpx;
						}
						.money_box {
							.red {
								color: #DB0618;
							}

							.min {
								font-size: 20rpx;
							}

							.bigs {
								font-size: 36rpx;
							}
						}
						
						.back_money{
							color: #fff;
							background-color: #FFA952;
							border-radius: 15rpx;
							height: 47rpx;
							line-height: 47rpx;
							box-sizing: border-box;
							font-size: 20rpx;
							padding-left: 15rpx;
							padding-right: 15rpx;
						}
						.back_iconx{
							font-size: 38rpx;
						}
					}
				}
			}

			.total_box {
				display: flex;
				width: 648rpx;
				margin: 0 auto;
				justify-content: flex-end;
				font-size: 28rpx;
				align-items: center;
				padding-top: 10rpx;
				.sum_back_momey{
					height: 47rpx;
					line-height: 47rpx;
					border-radius: 10rpx;
					padding-left: 15rpx;
					padding-right: 15rpx;
					margin-right: 45rpx;
					color: #fff;
					background-color: #FFA952;
					font-size: 26rpx;
				}
				.text_price{
					font-size: 34rpx;
				}
				.price{
					font-size: 36rpx;
				}
				text {
					&:last-child {
						color: #DB0618;
					}
				}
			}

			.gather {
				width: 235rpx;
				height: 60rpx;
				margin-top: 23rpx;
				margin-right: 21rpx;
				border: 1rpx solid #01AEEA;
				color: #01AEEA;
				font-size: 24rpx;
				border-radius: 30rpx;
				line-height: 60rpx;
			}
		}

		position: relative;

		.received {
			position: absolute;
			top: 18rpx;
			right: 122rpx;
			width: 181rpx;
			height: 108rpx;
		}
	}

	
	.row{
		margin: 40rpx auto 0;
		padding-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		width: 691rpx;
		font-size: 32rpx;
		border-bottom: 1px solid #707070;
		.text_title{
			margin-left: 20rpx;
		}
		.text_right{
			margin-right: 40rpx;
		}
	}
	.parse_box{
		margin: 40rpx 36rpx 0;
		font-size: 32rpx;
	}
	.pic_box {
			display: flex;
			width: 660rpx;
			border-bottom: 1rpx solid #BCBCBC;
			margin: 0 auto;
			padding-bottom: 16rpx;
			align-items: center;
			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 15rpx;
			}
		}
</style>