yogaApp/pages/order/orderwl.vue

<template>
	<view class="page">
		<!-- 物流信息 -->
		<view class="wlcon">
			物流信息
		</view>
		
		<view class="oinfo" v-if="info">
			
			<!-- 地址信息 -->
			<view class="yycon odrcell">
				<view class="atitle">
					<uni-icons type="location" size="23" color="#303133"></uni-icons>
					{{info.receiverName?info.receiverName:''}}
					{{info.receiverPhone?info.receiverPhone:''}}
				</view>
				<view class="olist">
					<view class="ocell1">
						{{info.receiverProvince?info.receiverProvince:''}}
						{{info.receiverCity?info.receiverCity:''}}
						{{info.receiverDistrict?info.receiverDistrict:''}}
						{{info.receiverDetailAddress?info.receiverDetailAddress:''}}
					</view>
				</view>
			</view>
			
			<!-- 商品信息 -->
			<view class="yycon odrcell" v-if="info.orderItemList&&info.orderItemList.length>0">
				<view class="oscon" v-for="(item, index) in info.orderItemList"  :key="index">
					<view class="osimg imgload">
						<image class="osimg" v-if="item.pic" :src="item.pic" mode="aspectFill"></image>
					</view>
					<view class="osrcon">
						<view class="osname">
							{{item.productName?item.productName:''}}
						</view>
						<view class="oscell">
							<text class="txt">规格：{{ retSku(item.spData) }}</text>
						</view>
						<view class="oscell">
							<text class="txt">单价：￥{{item.salePrice}}</text>
						</view>
						<view class="oscell">
							<text class="txt">数量：{{item.quantity}}</text>
						</view>
					</view>
					<view class="omoney">
						{{item.salePrice?'￥'+(item.salePrice*item.quantity).toFixed(2):"￥0"}}
					</view>
				</view>
			</view>
			
			<!-- 订单信息 -->
			<view class="yycon odrcell">
				<view class="olist">
					<view class="ocell">
						<text>
							商品总价
						</text>
						<text style="font-size: 30rpx;color:#000;font-weight: 600;">
							{{info.totalAmount?'￥'+(info.totalAmount).toFixed(2):"￥0.0"}}
						</text>
					</view>
				</view>
				<!-- <view class="olist">
					<view class="ocell">
						<text>
							运费险
						</text>
						<text>
							￥{{info.ordershipfee}}
						</text>
					</view>
				</view> -->
				<view class="olist">
					<view class="ocell">
						<text>
							交易金额
						</text>
						<text>
							￥{{info.payAmount}}
						</text>
					</view>
				</view>
				<view class="olist">
					<view class="ocell">
						<text>
							实付款
						</text>
						<text style="color:#ff0000;font-size: 30rpx;">
							￥{{info.payAmount}}
						</text>
					</view>
				</view>
				<view class="olist">
					<view class="ocell">
						<text>
							订单编号
						</text>
						<text>
							{{info.orderSn}}
						</text>
					</view>
				</view>
				<view class="olist" v-if="info.deliverySn">
					<view class="ocell">
						<text>
							物流单号
						</text>
						<text>
							{{info.deliverySn}}
						</text>
					</view>
				</view>
				<view class="olist">
					<view class="ocell">
						<text>
							下单日期
						</text>
						<text>{{info.createTime}}</text>
					</view>
				</view>
				<view class="olist" v-if="info.payType">
					<view class="ocell">
						<text>
							支付方式
						</text>
						<text>{{info.payType}}</text>
					</view>
				</view>
				<view class="olist" v-if="info.paymentTime">
					<view class="ocell">
						<text>
							支付日期
						</text>
						<text>{{info.paymentTime}}</text>
					</view>
				</view>
				<view class="olist">
					<view class="ocell">
						<text>
							下单备注
						</text>
						<text>{{info.note?info.note:'无'}}</text>
					</view>
				</view>
			</view>
			
		</view>
		
		<!-- 是否登录 -->
		<openlogin ref="loginId" @getPhoneNumber="getPhoneNumber"></openlogin> 
		
	</view>
</template>

<script>
	import { myCache } from '../../utils/utils.js';
	import openlogin from "../components/openlogin.vue";
	export default {
		components: {
			openlogin
		},
		data() {
			return {
				openId:"",
				phone:"",
				userid:"",
				id:"",
				info:{
					sh_state:"1",
					sh_name:"收货人",
					sh_phone:"18900000001",
					sh_address:"收货地址收货地址收货地址收货地址",
					orderid:"ord23258876543",
					business:"商家1",
					productid:"1",
					productprice:39.9,
					productname:"杜威克瑜伽球加厚防滑",
					img:'../../static/image/theme/p1.jpg',
					productspecs:"M 白",
					productnum:1,
					productunit:"个",
					status:'1',
					orderdate:"2025-06-23 10:26:09",
					paytype:"支付宝",
					paydate:"2025-06-23 10:26:09",
					ordershipfee:"0.0",
					jymoney:39.9,
					sfmoney:39.9,
					kdno:"1098768799232",
					icon:"../../static/image/product/sp1.jpg",
					username:"张三",
					tel:"18000000001",
					address:"江苏省扬州市江都市地址信息1地址信息2地址信息3地址信息4地址信息5",
					pname:"测试",
					sets:"租完6个月可买断 测试 测试",
					nums:1,
					rentcycle:6,
					last:5,
					price:0.01,
					delivery:"寄出包邮/顺丰包邮",
					freezedeposit:0.01,
					deposit:0.01,
					sesameCredit:0.00,
					freezeway:"支付宝资金授权",
					buyoutprice:0,
					orderNo:"20240314000000001",
					createdate:"2024-03-23 12:01:28",
					notes:"测试订单"
				}
			};
		},
		onLoad(options) {
			if(options.id)
			{
				this.id=parseInt(options.id);
				this.getinfo();
			}
		},
		onShow(){
			this.openId = myCache('openId');
			var user = myCache('user');
			this.userid = user.userid? user.userid:'';
			this.phone = user.userphone;
			if(this.userid==""||this.userid=="0"){
				uni.navigateTo({
					url: `/pages/login/login`
				});
			}
		},
		methods: {
			retSku(spData){
				var sels=[];
				if(spData){
					var suk= JSON.parse(spData);
					var keys=Object.keys(suk);
					keys.forEach(dd=>{
						sels.push(dd+":"+suk[dd])
					});
				}
				return sels.join(',');
			},
			getPhoneNumber(e){
				if(e.phone){
					this.phone = e.phone
				}
				if(e.userid){
					this.userid = e.userid
				}
			},
			goback(){
				uni.navigateBack({
					delta: 1
				});
			},
			async getinfo() {
				uni.showLoading({
					title: '数据加载中...'
				});
				const {data: res} = await uni.$http.get('/api/order/orderDetail', {orderId:this.id});
				if(res){
					// 订单信息
					this.info=res;
					this.$forceUpdate();
				}
				else{
					uni.showModal({
						title: '提示',
						content: '当前订单信息不存在..',
						cancelText: '取消',
						confirmText: '确定',
						success: ress => {
							// 返回
							uni.navigateBack({
								delta: 1
							});
						}
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.page{
		padding: 0;
		position: relative;
		display: block;
		background-color: #F5F5F5;
		overflow-y: auto;
		margin-bottom: 20rpx;
	}
	.oscon{
		margin:0;
		background-color: #f3fafa;
		border-radius: 16rpx;
		padding: 16rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		.osimg{
			width: 120rpx;
			height: 120rpx;
			border-radius: 10rpx;
		}
		.osrcon{
			display: flex;
			flex-direction: column;
			flex: 1;
			justify-content: flex-start;
			margin-left: 50rpx;
		}
		.osname{
			line-height: 48rpx;
			font-size:28rpx;
			color:#303133;
		}
		.oscell{
			font-size: 24rpx;
			color:#747474;
		}
		.omoney{
			display: flex;
			width: 100rpx;
			color:#333;
			font-size: 28rpx;
			align-items: flex-end;
			justify-content: flex-end;
		}
	}
	.odrcell{
		border-radius: 12rpx;
	} 
	.wlcon{
		padding: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		color:#303133;
		font-size: 30rpx;
		font-weight: 600;
	}
	.oinfo{
		padding:0 20rpx 20rpx 20rpx;
		position: relative;
		.yycon{
			display: flex;
			flex-direction: column;
			justify-content: center;
			background-color: #FFFFFF;
			margin-top: 20rpx;
			padding: 20rpx 20rpx;
			.atitle{
				padding: 10rpx 0 10rpx;
				color:#303133;
				font-size: 30rpx;
				font-weight: 600;
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			.olist{
				display: flex;
				flex-direction: column;
				padding: 0;
				width: 100%;
				.ocell{
					font-size: 26rpx;
					color:#747474;
					padding: 10rpx 0 10rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
				}
				.ocell1{
					font-size: 26rpx;
					color:#747474;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					margin-left: 50rpx;
				}
			}
			.sqcon{
				padding: 20rpx;
				margin: 20rpx 0;
				background-color: #f5f5f5;
				display: flex;
				flex-direction: column;
				border-radius: 10rpx;
				.sqlist{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					color: #333333;
					font-size: 26rpx;
					line-height: 50rpx;
				}
			}
		}
	}
	.allcon{
		min-height: 600rpx;
		overflow: hidden;
		background-color: #FFFFFF;
		margin-bottom: -150rpx;
		position: relative;
		display: block;
		padding-bottom: 80rpx;
		.paybtn{
			background-color: #89965f  !important;
			margin: 50rpx 20rpx 20rpx;
			border-radius: 50rpx;
			height: 75rpx;
			line-height: 75rpx;
			font-size: 30rpx;
			margin: 20rpx auto 180rpx auto;
			width: 650rpx;
		}
	}
</style>