shicai/pages/product/picked.vue

<template>
	<view class="container">
		<view class="top">
			<view class="top-tit">
				<image src="https://shicai.liuniu946.com/img/img26.png" class="tit-img"></image>
				<text class="tit-tit" v-if="shopinfo.status==0 && shopinfo.pink_status==3">已退款</text>
				<text class="tit-tit" v-if="shopinfo.status==0 && shopinfo.pink_status!=3">未发货</text>
				<text class="tit-tit" v-if="shopinfo.status==1">待收货</text>
				<text class="tit-tit" v-if="shopinfo.status==2">已收货，待评价</text>
				<text class="tit-tit" v-if="shopinfo.status==3">交易完成</text>
			</view>
			<view class="top-content">
			<!-- 	<view class="content">
					<text class="bContent">【自提时间】</text>2020年7月5日13:00-16:00
				</view> -->
				<view class="content">
					<text class="bContent">【自提地点】</text>
					{{shopinfo.pink_address.province + shopinfo.pink_address.city + shopinfo.pink_address.district + shopinfo.pink_address.detail}}
				</view>
				<view class="content" v-if="shopinfo.pink_status!==1&&shopinfo.isPinkT==1 && shopinfo.pink_type == 'AA团'">
					<text class="bContent">【本单邀请奖】</text>
					<!-- <text style="color: #FF1E29;">{{shopinfo.pepole_prize * (poplist.length + 1) || '0'}}</text> -->
					<text style="color: #FF1E29;">{{shopinfo.pepole_prize || '0'}}</text>
				</view>
				<view class="content" v-if="shopinfo.pink_status!==1&&shopinfo.isPinkT==1 && shopinfo.pink_type == '达人团' ">
					<text class="bContent">【团长佣金】</text>
					<text style="color: #FF1E29;">{{shopinfo.brokerage_prize  || '0'}}</text>
				</view>
				<view class="content" v-if="shopinfo.isPinkT==0">
					<text class="bContent">【团长信息】</text>{{shopinfo.pink_address.real_name}}
				</view>
				<view class="content" v-if="shopinfo.isPinkT==0">
					<text class="bContent">【团长电话】</text>{{shopinfo.pink_address.phone}}
				</view>
			</view>
		</view>
		<view class="info">
			<view class="info-top">
				<view class="top-left">
					<view class="img-box">
						<image :src="goodsinfo.image" class="left-img"></image>
						<image v-if="shopinfo.pink_type == 'AA团'" class="biaozhiT" src="https://shicai.liuniu946.com/img/img69.png"></image>
						<image v-if="shopinfo.pink_type == '达人团'" class="biaozhiT" src="https://shicai.liuniu946.com/img/img70.png"></image>
					</view>
					<view class="left-box">
						<view class="left-tit">
					     {{goodsinfo.store_name}}
						</view>
				<!-- 		<view class="left">
							规格：10枚
						</view> -->
						<view class="left">
							单价：¥{{goodsinfo.price}}
						</view>
						<view class="left">
							数量：{{cart_info.cart_num}}
						</view>
					</view>
				</view>
		<!-- 		<view class="top-right">
					¥0
				</view> -->
			</view>
			<view class="info-pic">
				<view class="pic-left">
					商品总额
				</view>
				<view class="pic-right">
					¥{{shopinfo.total_price}}
				</view>
			</view>
			<view class="info-pic">
				<view class="pic-left">
				到货时间
				</view>
				<view class="pic-right red">
					{{shopinfo.mark}}
				</view>
			</view>
			<!-- <view class="info-pic">
				<view class="pic-left">
				实际付款
				</view>
				<view class="pic-right red">
					¥{{shopinfo.pay_price}}
				</view>
			</view> -->
		</view>
		<view class="pop-info-box" v-if="shopinfo.isPinkT==1">
			<view class="pop-tit">
				参与人信息:全部团员确认收货后，即可领取全部佣金
			</view>
			<view class="pop" v-for="(item,index) in poplist" :key='index'>
				<image :src="item.avatar" class="avatar"></image>
				<view class="pop-right flex">
					<view class="right-left">
						<view class="left-top">
							<text class="nickname">
								{{item.real_name}}
							</text>
							<text class="phone">
								{{item.user_phone}}
							</text>
						</view>
						<view class="left-bottom" v-if="item.mark">
							{{item.mark }}
						</view>
						<view class="left-bottom left-none" v-else>
							11111
						</view>
					</view>
					<view class="right-right">
						<view class="red" v-if="item.status == 0">
							未发货
						</view>
						<view class="red" v-if="item.status == 1">
							待收货
						</view>
						<view class="green" v-if="item.status == 2">
							已收货
						</view>
						<view class="green" v-if="item.status == 3">
							交易完成
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="type-box">
			<view class="box"><text class="box-left">订单编号：</text><text class="box-right">{{shopinfo.order_id}}</text></view>
			<view class="box"><text class="box-left">提交时间：</text><text class="box-right">{{shopinfo.add_time}}</text></view>
			<view class="box"><text class="box-left">付款时间：</text><text class="box-right">{{shopinfo.pay_time}}</text></view>
			<view class="box"><text class="box-left">配送类型：</text><text class="box-right">自提</text></view>
			<view class="box"><text class="box-left">支付方式：</text><text class="box-right">{{shopinfo.pay_type}}</text></view>
			<view class="box" v-if="shopinfo.isPinkT == 1">
				<text class="box-left">买家姓名：</text>
				<text class="box-right">{{shopinfo.real_name}}</text>
			</view>
			<view class="box" v-if="shopinfo.isPinkT == 1">
				<text class="box-left">买家电话：</text>
				<text class="box-right">{{shopinfo.user_phone}}</text>
			</view>
			<view class="box">
				<text class="box-left">订单状态：</text>
				<text class="box-right" v-if="shopinfo.status==0 && shopinfo.pink_status == 3">已退款</text>
				<text class="box-right" v-if="shopinfo.status==0 && shopinfo.pink_status != 3">未发货</text>
				<text class="box-right" v-if="shopinfo.status==1">待收货</text>
				<text class="box-right" v-if="shopinfo.status==2">已收货，待评价</text>
				<text class="box-right" v-if="shopinfo.status==3">交易完成</text>
			</view>
		</view>
		<view class="bottom">
			<view class="gm" @click="navTo('/pages/service/service')">
				售后客服
			</view>
		</view>
	</view>
</template>

<script>
	import { orderMake } from '@/api/order.js';
	export default {
		data() {
			return {
				shopinfo:{},//订单信息
				goodsinfo:{},//商品信息
				cart_info:{},
				poplist: [],
				orderId:'',//订单id
			}
		},
		onLoad(options) {
			
			this.orderId = options.id;
			console.log(this.orderId);
			this.loadOrder();
		},
		methods:{
			//载入订单明细
			loadOrder(){
				orderMake({},this.orderId).then(({data})=>{
					this.shopinfo = data;
					this.goodsinfo = data.info[0].cart_info.productInfo;
					this.cart_info = data.info[0].cart_info;
					this.poplist = data.sub;
					console.log(this.cart_info);
				})
			},
			//跳转接口
			navTo(url) {
				uni.navigateTo({
					url
				});
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding-top: 20rpx;
		padding-bottom: 95rpx;

		.top {
			background-color: #FFFFFF;
			width: 716rpx;
			border-radius: 15rpx;
			margin: 0 auto;
			padding-bottom: 30rpx;

			.top-tit {
				display: flex;
				justify-content: center;
				padding-top: 38rpx;
				padding-bottom: 60rpx;
				align-items: center;

				.tit-img {
					width: 40rpx;
					height: 48rpx;
					margin-right: 15rpx;
				}

				.tit-tit {
					font-size: 45rpx;
					font-weight: bold;
					color: rgba(0, 0, 0, 1);
				}
			}

			.content {
				padding-left: 34rpx;
        padding-right: 34rpx;
				.bContent {
					font-weight: bold;
				}

				font-size:28rpx;
				font-weight:normal;
				color:rgba(0, 0, 0, 1);
				line-height:50rpx;
			}

		}

		.info {

			width: 714rpx;
			margin: 15rpx auto 0;
			background: rgba(255, 255, 255, 1);
			border-radius: 10rpx;
			padding: 30rpx;

			.info-top {
				display: flex;
				justify-content: space-between;

				.top-left {
					display: flex;
					
					.img-box {
						position: relative;
						.biaozhiT {
							position: absolute;
							top: 0;
							left: 0;
							width: 80rpx;
							height: 34rpx;
						}
					}
					.left-img {
						width: 137rpx;
						height: 137rpx;
						border-radius: 5rpx;
						margin-right: 10rpx;
					}

					.left-box {
						.left-tit {
							font-size: 27rpx;
							font-weight: 400;
							color: rgba(0, 0, 0, 1);
							margin-bottom: 5rpx;
						}

						.left {
							font-size: 23rpx;
							font-weight: 400;
							color: rgba(149, 149, 149, 1);
							line-height: 35rpx;
						}
					}
				}

				.top-right {
					font-size: 27rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 1);
				}
			}

			.info-pic {
				display: flex;
				justify-content: space-between;

				.pic-left {
					margin-top: 30rpx;
					font-size: 27rpx;
					font-weight: 400;
					color: rgba(74, 74, 74, 1);
				}

				.pic-right {
					margin-top: 30rpx;
					font-size: 27rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 1);

					&.red {
						color: #FF0A31;
					}
				}

			}
		}

		.type-box {
			width: 714rpx;
			margin: 20rpx auto;
			background: rgba(255, 255, 255, 1);
			border-radius: 10px;
			padding: 10rpx 30rpx;

			.box {

				.box-left {
					font-size: 27rpx;
					font-weight: 400;
					color: rgba(74, 74, 74, 1);
					line-height: 80rpx;
				}

				.box-right {
					font-size: 29rpx;
					font-weight: 400;
					color: rgba(149, 149, 149, 1);
					line-height: 80rpx;
				}
			}
		}

		.bottom {
			width: 100%;
			height: 95rpx;
			background: rgba(255, 255, 255, 1);
			border: 1px solid rgba(219, 219, 219, 1);
			padding-right: 25rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			position: fixed;
			bottom: 0;
			left: 0;
			.gm {
				padding: 5rpx 16rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 1);
				background: rgba(255, 255, 255, 1);
				border: 1px solid rgba(219, 219, 219, 1);
				border-radius: 30rpx;
			}
		}

		.pop-info-box {
			background-color: #FFFFFF;
			width: 714rpx;
			border-radius: 10rpx;
			margin: 20rpx auto;
			padding: 25rpx 30rpx 34rpx 30rpx;
			.pop-tit {
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(255, 0, 0, 1);
			}
			.pop {
				display: flex;
				align-items: center;
				margin-top: 35rpx;
				
				.avatar {
					width: 74rpx;
					height: 74rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}
				.pop-right {
					flex: 1;
					
					border-bottom: 1px solid rgba(210,210,210,1);
					.right-left{
						width: 85%;
						.left-top{
							.nickname{
								font-size:28rpx;
								font-weight:normal;
								color:rgba(41,38,33,1);
								margin-right: 15rpx;
							}
							.phone{
								font-size:24rpx;
								font-weight:bold;
								color:rgba(139,139,139,1);
							}
						}
						.left-bottom{
							font-size:28rpx;
							font-weight:normal;
							color:rgba(41,38,33,1);
						}
						.left-none {
							opacity: 0;
						}
					}
					.right-right{
						font-size:22rpx;
						font-weight:bold;
						.green{
							color:rgba(51,197,91,1);
						}
						.red{
							color:rgba(255,10,49,1);
						}
					}
				}
			}
		}
	}
</style>