yanzong_qianduan/pages/news3/fenxiaoDetails.vue

<template>
	<view>
		<view style="width:100%;position: fixed;top:0;z-index:99">
			 <view class="navBarContent">
					<u-icon name="arrow-left" style="position: absolute;top:50%;left:40upx;transform: translateY(-50%);" color="#000" size="24"></u-icon>
					<text>确认订单</text>
			 </view>
			
		</view>
		<image :src="$picUrl+'/static/news3/walletBg.png'" mode="widthFix" class="bgImg"></image>
		<view class="contentDes">
			<!-- 订单状态 -->
			<view class="order-status">
				<view class="status">
					<image :src="$picUrl+'/static/news3/time.png'" mode="widthFix"></image>
					<text>{{status==1?'待用户付款':status==2?'待用户确认订单':status==4?'订单取消':''}}</text>
				</view>
				<view class="reason" v-if="status!=4">
					<text>58分钟38秒</text>
					<text style="color:#666666">后{{status==1?'自动取消':status==2?'自动收货':''}}</text>
				</view>
			</view>
			<view class="personInfo">
				<view class="infoTitle">
					<text>分销员信息</text>
					<view class="phone">
						<image :src="$picUrl+'/static/news3/fx.png'" mode=""></image>
						<text>1898888979799</text>
					</view>
				</view>
				<view class="fxContent">
					<view class="fxPic">
						<image src="/static/empty.png" mode=""></image>
						<view class="peopleText">
							<view class="name">Deioio</view>
							<view class="realName">
								真实姓名：张三
							</view>
						</view>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<!-- 收货地址 -->
			<view class="shipping-address">
				<view class="name-phone">
					
					<text>王哈哈</text>
					<text>1788****8888</text>
				</view>
				<view class="address">
					<text>黑龙江道里区爱建路按揭贷款接啊禄口街道克拉克爱神的箭阿拉斯加刷卡机卡</text>
				</view>
			</view>
			<view class="remark">
				<view class="remarkTitle">订单备注</view>
				<view class="remarkText">这里是备注内容</view>
				<view class="img">
					<image :src="$picUrl+'/static/news3/filter.png'" mode=""></image>
					<image :src="$picUrl+'/static/news3/filter.png'" mode=""></image>
				</view>
			</view>
			<!-- 订单商品 -->
			<view class="order-goods">
				<view class="goods-list">
					<view class="list" v-for="(item,index) in list" :key="index">
						<image :src="item.image" mode="aspectFill" class="thumb"></image>
						<view class="item">
							<view class="title">{{item.name}}</view>
							<view class="num-size">{{item.config}}</view>
							<view class="price">
								<text class="num">x{{item.num}}</text>
								<view>
									<text class="moneyFlag">¥</text>
									<text class="numText">{{item.price}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="descInfo">
						<view class="descItem">
							<view class="descLeft">
								
								<text>配送方式</text>
							</view>
							<view class="descRight">
								快速发货
							</view>
						</view>
						<view class="descItem">
							<view class="descLeft">
								<text>配送费</text>
								<view class="descText">
									2件商品，共计20.4kg
								</view>
							</view>
							<view class="descRight">
								<text style="font-size:26upx">¥</text>
								<text>5.00</text>
							</view>
						</view>
						<view class="descItem">
							<view class="descLeft">
								<text>商品金额</text>
								
							</view>
							<view class="descRight">
								<text style="font-size:26upx">¥</text>
								<text>2500</text>
							</view>
						</view>
					</view>
					<view class="totalNum">
						<text>含运费¥5</text>
						<text>共计：</text>
						<text>¥5000</text>
					</view>
					<view class="btnContent">
						<view class="btnItem">
							<image :src="$picUrl+'/static/news3/phone.png'" mode="widthFix"></image>
							<text>联系客户</text>
						</view>
						<view class="btnItem" style="border-left:1px solid #F4F4F4">
							
							<image :src="$picUrl+'/static/news3/kefu.png'" mode="widthFix"></image>
							<text>联系商家</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 订单信息 -->
			<view class="order-info">
				<view class="info-list">
					<view class="list">
						<view class="title">订单编号:</view>
						<view class="content">
							15551231231231
							
						</view>
						<text class="btn">复制</text>
					</view>
					<view class="list">
						<view class="title">下单时间:</view>
						<view class="content">
							2020-12-12 13:11:11
						</view>
					</view>
					<view class="list">
						<view class="title">付款时间:</view>
						<view class="content">
							2023-02-01  12:21:00
						</view>
					</view>
					<view class="list">
						<view class="title">支付方式:</view>
						<view class="content">
							微信支付
						</view>
					</view>
					
				</view>
			</view>
			
			<!-- 底部按钮 -->
			<view class="footer-btn" v-if="status==1">
				<view class="del">
					修改地址
				</view>
				<view class="btn">
					修改价格
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{name:'联想小新笔记本电脑2023年新款',image:'https://www.royaum.com.cn/static/news3/filter.png',config:'16GB，128GB',num:1,price:2500},
					{name:'联想小新笔记本电脑2023年新款',image:'https://www.royaum.com.cn/static/news3/filter.png',config:'16GB，128GB',num:1,price:2500},
				],
				// 0全部1待付款2待发货3售后订单4已退款5已完成6已删除7待收货
				status:1,
			};
		},
		methods:{
			/**
			 * 售后点击
			 */
			onApplyAftersales(){
				uni.navigateTo({
					url: '/pages/AfterSaleType/AfterSaleType',
				})
			}
		}
	}
</script>

<style scoped lang="scss">
page{
	background-color: #F7F8FA;
	min-height: 100%;
	padding-bottom: 140upx;
}
.bgImg{
	width:100%;
	height:auto;
	position:absolute;
	top:0;
	left:0;
	z-index:1;
}
.contentDes{
	position:relative;
	z-index:2;
	margin:0upx 26upx;
	padding-top:120upx;
}
.navBarContent{
	height:88upx;
	line-height: 88upx;
	text-align: center;
	position: relative;
	text{
		font-size: 32upx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #000;
	}
	
}

.page{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #f6f6f6;
}

/* 订单状态 */
.order-status{
	width: 100%;
	.status{
		display: flex;
		align-items: center;
		// justify-content: center;
		width: 100%;
		image{
			width:54upx;
			height:auto;
		}
		text{
			font-size: 40upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #3B3B3B;
			margin-left:20upx;
		}
	}
	.reason{
		display: flex;
		align-items: center;
		margin-top:14upx;
		text{
			font-size: 30upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #FF6F6F;
		}
	}
}

.personInfo{
	background: #FFFFFF;
	border-radius: 4px 4px 4px 4px;
	opacity: 1;
	padding:28upx 40upx;
	margin-top:80upx;
	.infoTitle{
		display: flex;
		justify-content: space-between;
		align-items: center;
		&>text{
			font-size: 28upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #3B3B3B;
			
		}
		.phone{
			display: flex;
			align-items: center;
			image{
				width:32upx;
				height:32upx;
			}
			text{
			
				font-size: 28upx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #3B3B3B;
				margin-left:10upx;
			}
		}
	}
	.fxContent{
		display: flex;
		align-items: center;
		margin-top:40upx;
		.fxPic{
			display: flex;
			align-items: center;
			flex:1;
			image{
				width:114upx;
				height:114upx;
				flex-shrink: 0;
			}
			.peopleText{
				margin-left:28upx;
				
				.name{
					font-size: 32upx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #2F2F2F;
				
				}
				.realName{
					margin-top:10upx;
					font-size: 28upx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #8B8B8B;
				
				}
			}
		}
		
	}
}
/* 收货地址 */
.shipping-address{
	
	height: 180upx;
	background: #FFFFFF;
	border-radius: 4px 4px 4px 4px;
	opacity: 1;
	margin-top:16upx;
	padding:0 40upx;
	.name-phone{
		display: flex;
		align-items: center;
		
		height: 80rpx;
		text{
			font-size: 28upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #3B3B3B;
			
		}
	}
	.address{
		text{
			font-size: 28upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #B0B0B0;
			
		}
	}
}
.remark{
	background: #FFFFFF;
	border-radius: 4px 4px 4px 4px;
	opacity: 1;
	padding:26upx 40upx;
	margin:16upx 0;
	.remarkTitle{
		
		font-size: 28upx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #3B3B3B;
		
	}
	.remarkText{
		font-size: 28upx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #BEBEBE;
		margin:20upx 0;
	}
	.img{
		display: flex;
		image{
			width:100upx;
			height:100upx;
			margin:0 10upx;
		}
	}
}

/* 订单商品 */
.order-goods{
	width: 100%;
	background-color: #FFFFFF;
	border-radius: 4px;
	.goods-list{
		padding:40upx 40upx 0 40upx;
		.list{
			display: flex;
			align-items: center;
			width: 100%;
			.thumb{
				width:150upx;
				height:150upx;
			}
			.item{
				margin-top:20upx;
				flex:1;
				margin-left:30upx;
				.title{
					font-size: 28upx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #000000;
				}
				.num-size{
					margin:14upx 0;
					font-size: 28upx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #7C7C7C;
				
				}
				.price{
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					.num{
						font-size: 28upx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #1E1E1E;
					}
					.moneyFlag{
						font-size: 26upx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #F21A1C;
						
					}
					.numText{
						
						font-size: 32upx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #F21A1C;
						
					}
				}
				.order-btn{
					display: flex;
					align-items: center;
					justify-content: flex-end;
					width: 100%;
					height: 100rpx;
					.btn{
						padding: 10rpx 30rpx;
						color: #555555;
						font-size: 26rpx;
						border: 2rpx solid #EEEEEE;
						border-radius: 100rpx;
					}
				}.order-btn{
					display: flex;
					align-items: center;
					justify-content: flex-end;
					width: 100%;
					height: 100rpx;
					.btn{
						padding: 10rpx 30rpx;
						color: #555555;
						font-size: 26rpx;
						border: 2rpx solid #EEEEEE;
						border-radius: 100rpx;
					}
				}
			}
		}
	}
	
}
.descInfo{
	.descItem{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top:20upx;
		.descLeft{
			text{
				
				font-size: 28upx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #3B3B3B;
				
			}
			.descText{
				
				font-size: 24upx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #B7B7B7;
				
			}
		}
		.descRight{
		
			font-size: 28upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #515151;
			
		}
	}
}
.totalNum{
	text-align: right;
	margin-top:30upx;
	text:first-child{
		font-size: 24upx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #B7B7B7;
		
	}
	text:nth-child(2){
		font-size: 32upx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #3B3B3B;
		margin:0 10upx;
		
	}
	text:nth-child(3){
		font-size: 32upx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		color: #F21A1C;
	
	}
}
.btnContent{
	display: flex;
	border-top:1px solid #F4F4F4;
	margin-top:26upx;
	.btnItem{
		justify-content: center;
		flex:1;
		display: flex;
		align-items: center;
		margin:20upx 0;
		image{
			width:30upx;
			height: auto;
		}
		text{
			
			font-size: 24upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #1E1E1E;
			margin-left:14upx;
		}
	}
}

/* 订单信息 */
.order-info{
	width: 100%;
	background-color: #FFFFFF;
	border-radius: 4px;
	.info-list{
		padding:24upx 34upx;
		margin-top:20upx;
		.list{
			display: flex;
			align-items: center;
			width: 100%;
			position: relative;
			margin:20upx 0;
			.btn{
			
				font-size: 24upx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #F63016;
				position: absolute;
				right:0;
			}
			.title{
				
				font-size: 24upx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #7E7E7E;
				
			}
			.content{
				margin-left:20upx;
				font-size: 24upx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #1E1E1E;
			
			}
		}
	}
}



.footer-btn{
	position: fixed;
	left: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content:flex-end;
	width: 100%;
	height: 100rpx;
	background-color: #FFFFFF;
	border-top: 2rpx solid #EEEEEE;
	padding: 0 40upx;
	.del{
		width: 140upx;
		height: 68upx;
		background: #FFFFFF;
		border-radius: 38px 38px 38px 38px;
		opacity: 1;
		border: 1px solid #D9D9D9;
		line-height: 68upx;
	
		font-size: 24upx;
		text-align: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #828282;
		
	}
	.btn{
		text-align: center;
		width: 140upx;
		height: 68upx;
		background: #FFFFFF;
		border-radius: 38px 38px 38px 38px;
		opacity: 1;
		border: 1px solid #F21A1C;
		line-height: 68upx;
			
		font-size: 24upx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #F21A1C;
		margin-left:14upx;
	}
}
</style>