JP-ChargeTeam51/pages/store/orderDetails.vue

<template>
	<view>
		<ujp-navbar title="订单详情"></ujp-navbar>
		<!-- 付款状态 -->
		<view class="payment-state">
			<!-- 待付款 -->
			<view class="state1" v-if="info.mallProductOrder.payStatus==0">
				<view class="icon">
					<img src="../../assets/img/riFill-time-fill@3x.png" alt="">
				</view>
				待付款
			</view>
			<!-- 待付款 -->
			<view class="state1" v-if="info.mallProductOrder.payStatus==2">
				<view class="icon">
					<img src="../../assets/img/riFill-time-fill@3x.png" alt="">
				</view>
				已退款
			</view>
			<!-- 交易完成 -->
			<view class="state2" v-if="info.mallProductOrder.payStatus==1">
				<view class="icon">
					<img src="../../assets/img/riFill-checkbox-circle-fill@3x.png" alt="">
				</view>
				交易完成
			</view>
		</view>
		<!-- 运输信息 -->
		<view class="shipping-information">
			
			<view class="shipping-state" v-if="false">
				<view class="icon">
					<img src="../../assets/img/riLine-truck-line Copy@3x.png" alt="">
				</view>
				<view class="state-time">
					<view class="state">
						已下单，请在 <text class="countdown"> 09:59 </text> 内完成付款
					</view>
					<view class="time">
						2023-12-15 17:00:00
					</view>
				</view>
				<view class="icon2">
					<u-icon name="arrow-right" size="24" color="#999999"></u-icon>
				</view>
			</view>
			<!-- 收货人信息 -->
			<view class="consignee-information">
				<view class="icon">
					<u-icon name="map" size="40"></u-icon>
				</view>
				<view class="infos">
					<view class="name-tel">
						{{info.mallProductOrder.receiver}} {{info.mallProductOrder.contactPhone}}
					</view>
					<view class="address">
						收货地址:{{info.mallProductOrder.deliveryAddress}}
					</view>
				</view>

			</view>




		</view>

		<!-- 商品信息 -->
		<view class="commodity-main">
			<view class="commodity-infos">
				<!-- 图片 -->
				<view class="picture">
					<img :src="info.mallProductOrder.productPic" alt="">
				</view>
				<!-- 信息 -->
				<view class="infos">
					<view class="title">
						{{info.mallProductOrder.productName}}
					</view>
					<view class="name">
						 
					</view>
					<view class="price">
						{{info.mallProductOrder.price}}元
					</view>
				</view>
				<!-- 数量 -->
				<view class="amount">
					x{{info.mallProductOrder.buyNum}}
				</view>
			</view>
			<!-- 订单金额 -->
			<view class="order-amount">
				<view class="title">
					订单金额
				</view>
				<view class="value">
					{{info.mallProductOrder.totalFee}}元
				</view>
			</view>
			<view class="else-infos">
				<template v-for="(item,i) in info.priceAttrList" >
				
					<view class="infos-item"   :key="i">
						<view class="item-title">
							{{item.attribute.name}}
						</view>
						<view class="item-value item-value-end">
							<view v-for="(option , oindex) in item.options"  :key="i+'__'+oindex">
							{{option.label}} <span style="margin-left: 8px;" v-if="option.price">{{option.price}}元</span>
							</view>
							
						</view>
					
					</view>
				</template>
			</view>
			<!-- 其他信息 -->
			<view class="else-infos">
				<view class="infos-item" v-if="false">
					<view class="item-title">
						商品总金额
					</view>
					<view class="item-value">
						12.90元
					</view>
				</view>
				<view class="infos-item" v-if="false">
					<view class="item-title">
						交易手机号
					</view>
					<view class="item-value">
						155****0001
					</view>
				</view>
				<view class="infos-item">
					<view class="item-title">
						订单号
					</view>
					<view class="item-value" @click="copyUrl(info.mallProductOrder.outOrderNo)">
						{{info.mallProductOrder.outOrderNo}}
						<text><img src="../../assets/img/riLine-file-copy-2-line@3x.png" alt=""></text>
					</view>
				</view>
				<view class="infos-item" v-if="false">
					<view class="item-title">
						创建时间
					</view>
					<view class="item-value">
							
					</view>
				</view>
				<view class="infos-item">
					<view class="item-title">
						下单时间
					</view>
					<view class="item-value">
						{{info.mallProductOrder.createTime}}
					</view>
				</view>
			</view>
		</view>
	
	
	  <!-- 底部 -->
	  <view class="bottom">
		  <!-- 取消订单 -->
		<!--  <view class="cancel btn">
		  	取消订单
		  </view> -->
		  <!-- 联系客服 -->
		  <view class="service btn"   @click="gotoUrl('pages/service/service')">
		  	联系客服
		  </view>
	  	  <!-- 立即支付 -->
		 <!-- <view class="pay btn">
		  	立即支付
		  </view> -->
	  </view>
	
	</view>
</template>

<script>
	import * as API from '@/apis/mall.js'
	
	export default {
		data() {
			return {
				info:{
					mallProductOrder:{},
					priceAttrList:{},
				},
				id:"",
			}
		},
		onLoad(op) {
			
			if (op.id) {
				this.id = op.id;
				this.getDetail();
			}
		
		},
		methods: {
			copyUrl(text){
				  var textToCopy = 'http://www.jsrailway.com.cn/railroad-portal/';  
					uni.setClipboardData({
						data: text,
						success: function () {
							uni.showToast({
								title: "复制成功！",
								icon: "none"
							})
						}
					});
					
				 
			},
			getDetail(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.myOrderDetails({
					id:this.id
				}).then((res) => {
					uni.hideLoading();
					this.info=res.data
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item-value-end{
		    text-align: end;
		
	}
	// 付款状态
	.payment-state {
		padding: 48rpx 32rpx;

		.state1,
		.state2 {
			display: flex;

			font-size: 36rpx;
			line-height: 48rpx;
			font-weight: bold;

			.icon {
				margin-right: 8rpx;

				img {
					width: 48rpx;
					height: 48rpx;

				}
			}
		}
	}

	// 运输信息
	.shipping-information {
		background-color: #fff;
		padding: 40rpx 32rpx;

		.shipping-state {
			display: flex;
			padding-bottom: 40rpx;
			border-bottom: 1px solid rgba(242, 242, 242, 1);

			img {
				width: 40rpx;
				height: 40rpx;
			}

			.state-time {
				margin-left: 8rpx;

				.state {
					color: rgba(51, 51, 51, 1);
					font-weight: bold;

					.countdown {
						color: #00B962;
					}
				}

				.time {
					color: rgba(119, 119, 119, 1);
					font-size: 24rpx;
					margin-top: 8rpx;
				}
			}

			.icon2 {
				margin-left: auto;
			}
		}

		// 收货人信息
		.consignee-information {
			padding-top: 40rpx;
			display: flex;

			.infos {
				margin-left: 8rpx;

				.name-tel {
					color: rgba(51, 51, 51, 1);
					font-weight: bold;
				}

				.address {
					color: rgba(119, 119, 119, 1);
					font-size: 24rpx;
					margin-top: 8rpx;
					line-height: 34rpx;
				}
			}
		}
	}

	// 商品信息
	.commodity-main {
		background-color: #fff;
		margin: 24rpx 0;
		padding: 32rpx;
		padding-bottom: 80px;
		.commodity-infos {

			display: flex;
			align-items: center;

			// 图片
			.picture {
				width: 152rpx;
				height: 152rpx;
				border-radius: 4px;

				img {
					width: 100%;
					height: 100%;
				}
			}

			// 信息
			.infos {
				margin-left: 16rpx;

				.title {
					color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
					font-weight: bold;
				}

				.name {
					color: rgba(119, 119, 119, 1);
					font-size: 24rpx;
					margin-top: 8rpx;
				}

				.price {
					color: rgba(16, 16, 16, 1);
					font-size: 32rpx;
					margin-top: 24rpx;
				}
			}

			// 数量
			.amount {
				color: rgba(51, 51, 51, 1);
				font-size: 32rpx;
				margin-left: auto;
			}
		}

		// 订单金额
		.order-amount {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 40rpx 0;

			.title {
				color: rgba(51, 51, 51, 1);
			}

			.value {
				color: rgba(51, 51, 51, 1);
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		// 其他信息
		.else-infos {
			padding-top: 16rpx;
			border-top: 1px solid rgba(242, 242, 242, 1);

			.infos-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 24rpx;
				line-height: 48rpx;

				.item-title {
					color: rgba(119, 119, 119, 1);
				}

				.item-value {
					color: rgba(119, 119, 119, 1);
					
					
					img{
						width: 32rpx;
						height: 32rpx;
						
					}
				}
			}
		}

	}

  // 底部
  .bottom{
	  position: fixed;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background-color: #fff;
	  padding: 20rpx 32rpx;
	  display: flex;
	  justify-content: flex-end;
	  .btn{
		  width: 200rpx;
		  height: 72rpx;
		  line-height: 72rpx;
		  border-radius: 50px;
		  
		  font-size: 32rpx;
		  text-align: center;
		  border: 1px solid rgba(204, 204, 204, 1);
		  margin-left: 16rpx;
	  }
	  .cancel,.service{
		  background-color: rgba(255, 255, 255, 1);
		  color: rgba(119, 119, 119, 1);
	  }
	  .pay{
		  background-color: rgba(0, 185, 98, 1);
		  color: rgba(255, 255, 255, 1);
	  }
  }


</style>