jiaoyi-uni2/奥莱优品/pages/order/detail.vue

<template>
	<view class="content">
		<template v-if="!isLogin">
			<view class="empty-body">
				<view class="imgs">
					<image src="/static/image/empty.png" mode="widthFix"></image>
					<view class="tip">请先完成登录~</view>
				</view>
				<view class="re-btn" @click="toLogin">去登陆</view>
			</view>
		</template>
		<template v-else>
			<template v-if="loading">
				<view class="skeleton">
					<view class="skeleton-line max animate" style="height: 200upx;"></view>
					<view class="skeleton-line animate"></view>
					<view class="skeleton-line min animate"></view>
					<view class="skeleton-line min animate"></view>
					<view class="skeleton-line max animate" style="height: 200upx;"></view>
					<view class="skeleton-line max animate" style="height: 200upx;"></view>
				</view>
			</template>
			<template v-else>
				<scroll-view class="goods-body" scroll-y scroll-with-animation>
					<view class="order-body">
						<view class="status-body">
							<view class="order_status">
								<template v-if="orderData && orderData.status == 0">
									<view class="status-name">待支付</view>
									<view class="status-desc">超过30分钟未支付，订单将自动取消</view>
								</template>
								<template v-if="orderData && orderData.status == 1">
									<view class="status-name">
										<image src="/static/image/order/time.svg"></image>待使用
									</view>
									<view class="status-desc" v-if="orderData.end_at">有效期至：{{ orderData.end_at }}</view>
									<view class="status-desc" v-else>如有疑问，可咨询客服</view>
								</template>
								<template v-if="orderData && orderData.status == 2">
									<view class="status-name success">
										<image src="/static/image/order/success.svg"></image>已完成
									</view>
									<view class="status-desc">服务已完成,欢迎您再次使用</view>
								</template>
								<template v-if="orderData && orderData.status == 3">
									<view class="status-name">
										<image src="/static/image/order/refund.svg"></image>
										退款成功
									</view>
									<view class="status-desc">{{ $dialog.formatMoney(orderData.pay_money,true) }} 已原路退回</view>
								</template>
								<template v-if="orderData && orderData.status == 4">
									<view class="status-name">
										<image src="/static/image/order/refund.svg"></image>退款中</view>
									<view class="status-desc">已申请退款，钱款预计1-3个自然日到账</view>
								</template>
								<template v-if="orderData && orderData.status == 5">
									<view class="status-name">已关闭</view>
									<view class="status-desc">订单已取消或已关闭</view>
								</template>
								<template v-if="orderData && orderData.status == 6">
									<view class="status-name">部分退款</view>
									<view class="status-desc">已退款{{orderData.refund_num}}份</view>
								</template>
								<template v-if="orderData && orderData.status == 7">
									<view class="status-name">
										<image src="/static/image/order/goon.svg"></image>履约中
									</view>
									<view class="status-desc">服务进行中，有疑问请咨询客服</view>
								</template>
							</view>
						</view>
						<view class="item-goods">
							<view class="item-goods-body">
								<view class="image">
									<image :src="orderData.img"></image>
								</view>
								<view class="info">
									<view class="title">
										<view class="name">{{ goodsData.product_name }}</view>
										<view class="num">x{{ orderData.number }}</view>
									</view>
									<view class="tags">
										{{orderData.sku_name?orderData.sku_name:'默认'}}
										<view class="price">{{ $dialog.formatMoney(orderData.price,true) }}</view>
									</view>
									<view class="price-right">实付 <text>{{ $dialog.formatMoney(orderData.pay_money,true) }}</text></view>
								</view>
							</view>
							<view class="order-qrcode" v-if="orderData.status == 1">
								<view class="qrcode-img">
									<ikun-qrcode
										width="200"
										height="200"
										unit="rpx"
										color="#000000"
										:data="orderData.order_sn">
									</ikun-qrcode>
								</view>
								<view class="qrcode-text">券码 {{orderData.order_sn}} <text @click="copyOrder(orderData.order_sn)">复制</text></view>
							</view>
						</view>
						<view class="home-store">
							<view class="service-detail" @click="kfPop()">
								<view class="left">
									<image src="/static/image/kefu.png"></image>
									<view class="name">联系客服</view>
								</view>
								<view class="right" v-if="storeData">
									<image src="/static/image/right-black.png"></image>
								</view>
							</view>
							<view class="service-detail" @click="orderTs()">
								<view class="left">
									<image src="/static/image/face.svg"></image>
									<view class="name">我要投诉</view>
								</view>
								<view class="right">
									<image src="/static/image/right-black.png"></image>
								</view>
							</view>
						</view>
						<view class="goods-store" v-if="poiData">
							<view class="title">适用门店</view>
							<view class="store-info">
								<view class="store-left">
									<view class="name">{{poiData?poiData.poi_name:'-'}}</view>
									<view class="address">{{poiData?poiData.poi_address:'-'}}</view>
								</view>
								<view class="store-right">
									<view class="right-item" @click="toMap">
										<image src="/static/image/amap.png"></image>
										<view class="desc">导航</view>
									</view>
								</view>
							</view>
						</view>
						<view class="order-info">
							<view class="title">订单信息</view>
							<view class="info-item">
								<view class="name">订单编号</view>
								<view class="right">{{ orderData.out_order_no }} <text @click="copyOrder(orderData.out_order_no)">复制</text></view>
							</view>
							<view class="info-item">
								<view class="name">手机号码</view>
								<view class="right">{{ orderData.mobile }}</view>
							</view>
							<view class="info-item">
								<view class="name">下单时间</view>
								<view class="right">{{ orderData.create_at }}</view>
							</view>
							<view class="info-item">
								<view class="name">付款时间</view>
								<view class="right">{{ orderData.pay_at }}</view>
							</view>
							<view class="info-item" v-if="orderData.status == 3">
								<view class="name">退款时间</view>
								<view class="right">{{ orderData.refund_at }}</view>
							</view>
						</view>
					</view>
					<view class="line-height"></view>
				</scroll-view>
				<view class="footer">
					<view class="footer-op">
						<view class="footer-left"></view>
						<view class="footer-right">
							<template v-if="orderData.status == 1 || orderData.status == 6">
								<pay-button-sdk
									class="btn"
									:mode="1"
									:goods-type="1"
									:order-status="1"
									:order-id="orderData.out_order_no"
									:goods-id="orderData.life_goods_id"
									:refund-total-amount="orderData.pay_money"
									bind:applyrefund="applyRefund"
									bind:refund="handleRefund"
									bind:error="onErrors"
								></pay-button-sdk>
								<view class="btn full" @click="$dialog.jumpUri('/pages/service/chat?poi='+storeData.poi_id+'&source=apply&order='+orderData.order_sn,1);">立即预约</view>
							</template>
							<template v-if="orderData.status == 2">
								<view class="btn" @click="toGoods">再来一单</view>
								<view class="btn full" @click="toAfter">申请售后</view>
							</template>
							<template v-if="orderData.status == 3 || orderData.status == 4">
								<view class="btn">再次购买</view>
							</template>
							<template v-if="orderData.status == 5">
								<view class="btn" @click="toGoods">再次购买</view>
							</template>
						</view>
					</view>
					<view class="footer-safe"></view>
				</view>
			</template>
		</template>
		<halfLogin ref="loginCom" @success="loginSuccess"></halfLogin>
		<kfService ref="kfService"></kfService>
		<complaint ref="complaint"></complaint>
	</view>
</template>

<script>
var app;
import complaint from "@/components/kfService/complaint";
export default {
	components: {
		complaint
	},
	data() {
		return {
			optionData:null,
			storeData:null,
			order:0,
			loading:true,
			goodsData:null,
			orderTime:null,
			poiData:null,
			orderData:null,
			isLogin:true,
			userState:1
		}
	},
	created() {
		this.$scope.applyRefund = this.applyRefund;
		this.$scope.onPay = this.onPay;
		this.$scope.handleRefund = this.handleRefund;
		this.$scope.onErrors = this.onErrors;
	},
	onShow(){
	    let allPages = getCurrentPages(); //获取当前页面栈的实例；
		let lastPages = allPages.length - 1; // 获得倒数第二个元素的索引；
		let option = allPages[lastPages].options; // 获得上个页面传递的参数；
		this.order = option.order?option.order:''
		this.optionData = option
		this.getOrder();
	},
	onLoad() {
		app = this;
	},
	methods: {
		kfPop(){
			if (app.userState == 0) {
				this.$refs.loginCom.open(2);
				return ;
			}
			this.$refs.kfService.open(app.storeData);
		},
		orderTs(){
			this.$refs.complaint.open(app.order);
		},
		toLogin(){
			this.$refs.loginCom.open();
		},
		loginSuccess(){
			app.getOrder();
		},
		async getOrder(){
			app.loading = true;
			var res = await app.$api.order.detail.get({"order":app.order});
			app.loading = false;
			if (res.code && res.code == 0) {
				app.$dialog.showSuccess(res.msg);
				uni.navigateBack()
				return ;
			}
			if (res.code && res.code == 401) {
				app.isLogin = false;
				this.$refs.loginCom.open();
				return ;
			}
			app.isLogin = true;
			uni.setStorageSync("poiId",res.data.poi_id);
			app.poiData = res.data.poi;
			app.userState = res.data.user;
			const storeDataTemp = {
				"end_at":app.poiData.end_at,
				"latitude":app.poiData.latitude,
				"longitude":app.poiData.longitude,
				"poi_address":app.poiData.poi_address,
				"poi_city":app.poiData.poi_city,
				"poi_id":app.poiData.poi_id,
				"poi_logo":app.poiData.poi_logo,
				"poi_name":app.poiData.poi_name,
				"service_mobile":app.poiData.service_mobile,
				"start_at":app.poiData.start_at
			};
			uni.setStorageSync("contact",storeDataTemp);
			app.storeData = storeDataTemp;
			app.goodsData = res.data.product;
			app.orderData = res.data;
			app.orderTime = res.data.end_time
		},
		copyOrder(order){
			uni.setClipboardData({
				data:order,
				success() {
					app.$dialog.showSuccess("复制成功")
				},
				fail() {
					app.$dialog.showSuccess("复制失败")
				}
			})
		},
		toMap(){
			var poi = app.poiData;
			uni.openLocation({
				latitude:poi.latitude,
				longitude:poi.longitude,
				name:poi.poi_name,
				address:poi.poi_address,
				success() {
					console.log("open success")
				},
				fail(err) {
					app.$dialog.showSuccess("打开导航失败")
					console.log(err)
				}
			})
		},
		applyRefund(){},
		onPay(){},
		handleRefund(){},
		onErrors(){},
	}
}
</script>

<style lang="scss" scoped>
.content{
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #f1f1f1;
	display: flex;
	flex-direction: column;
	.line-height{
		height: 40rpx;
		width: 100%;
	}
}
.empty-body{
	display: flex;align-items: center;justify-content: center;flex-direction: column;height: calc(100vh - 100upx);
	.imgs{
		text-align: center;font-size: 28upx;color: #666;
		image{height: 160upx;width: 160upx;}
		.tip{margin-top: 20upx;}
	}
	.re-btn{
		width: 180upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		font-size: 28upx;
		color: #fff;
		background-color: $main-color;
		border-radius: 10upx;
		margin-top: 60upx;
	}
}
.order-qrcode {
	.qrcode-img {
		margin-top: 20rpx;
		padding: 40rpx 0;
		border-top: 5rpx dotted #f8f8f8;
		border-bottom: 5rpx dotted #f8f8f8;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.qrcode-text{
		text-align: center;
		margin-top: 20upx;
		text{margin-left: 10upx;color: #007aff;}
	}
}
.home-store{
	margin: 20upx auto;
	display: flex;
	align-items: center;
	gap: 20upx;
	justify-content: space-between;
	.service-detail{
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 10upx;
		height: 120upx;padding: 0 20upx;
		flex: 1;
		.left{
			display: flex;align-items: center;
			image{width: 50upx;height: 50upx;margin-right: 15upx;}
		}
		.right {
			margin-left: auto;margin-right: 0;display: flex;align-items: center;
			image{width: 50upx;height: 50upx;}
		}
	}
	.service-btn{
		background-color: #fff;text-align: center;padding: 0 30upx;font-size: 28upx;height: 120upx;line-height: 120upx;display: flex;align-items: center;justify-content: space-between;
		image{width: 50upx;height: 50upx;}
		.btn-name{
			margin-left: 15upx;
			image{width: 40upx;height: 40upx;}
		}
	}
}
.footer{
	background-color: #fff;
	padding: 20upx 20upx 0 20upx;border-top: 2upx solid #f8f8f8;
	.footer-safe {
		height: env(safe-area-inset-bottom);width: 100%;
	}
	.footer-op{
		display: flex;
		align-items: center;
		justify-content: space-between;
		.footer-right{
			display: flex;
			align-items: center;
			gap: 20rpx;
			.btn{
				font-size: 28rpx;
				height: 80upx;
				border-radius: 10upx;
				line-height: 80upx;
				text-align: center;
				min-width: 200rpx;
				color: #333;
				border: 2rpx solid #ccc;
				&.full{
					background-color: $main-color;
					color: #fff;
					border: 2rpx solid $main-color;
				}
			}
		}
	}
}
.goods-body{
	height: 0;
	flex: 1;
}
.order-body {
	width: 95%;
	margin: 20rpx auto;
	.order_status{
		.status-name{
			display: flex;
			align-items: center;
			gap: 20rpx;
			font-size: 38rpx;
			color: #000;
			font-weight: 800;
			image {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}
	.item-goods{
		background-color: #fff;
		margin-top: 20rpx;
		border-radius: 20rpx;
		padding: 20rpx;
		.item-goods-body{
			display: flex;
			align-items: center;
			gap: 20rpx;
		}
		.stock{
			text-align: right;
		}
		.image {
			height: 140rpx;
			overflow: hidden;display: flex;align-items: center;min-width: 140rpx;
			position: relative;
			image {
				width: 140rpx;
				border-radius: 10upx;
				height: 100%;
			}
		}
		.info{
			flex: 1 1 0%;
			overflow: hidden;
			.title{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.name {
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 32rpx;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					 -webkit-box-orient: vertical;
					color: #333;
					font-weight: 900;
				}
			}
			.price-right{
				text-align: right;
				color: $main-color;
				margin-top: 20rpx;
				font-size: 28rpx;
				text {
					font-size: 30rpx;
					font-weight: 800;
				}
			}
			.tags {
				color: #94a3b8;
				font-size: 24rpx;
				margin: 10rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.price {
					font-size: 28rpx;
					color: $main-text-color;
					font-weight: 600;
				}
			}
		}
	}
	.order-info{
		border-radius: 20rpx;
		background-color: #fff;padding: 20upx;margin-top: 20upx;
		.title{font-size: 32upx;color: #333;font-weight: bold;margin-bottom: 20upx;}
		.info-item{
			height: 80upx;line-height: 80upx;font-size: 28upx;display: flex;align-items: center;
			.right{
				color: #666;margin-left: auto;margin-right: 0;
				text{border: 2upx solid #ccc;color: #333;font-size: 24upx;padding: 0 15upx;margin-left: 20upx;border-radius: 5upx;}
			}
		}
	}
	.status-desc{
		font-size: 24rpx;color: #666;margin-top: 20rpx;
	}
	.goods-store{
		background-color: #fff;
		margin:20rpx 0;
		padding: 0 20rpx 20rpx;
		border-radius: 20rpx;
		.title{
			line-height: 80upx;
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
			display: flex;
			align-items: center;
			border-bottom: 2upx solid #f8f8f8;
		}
		.store-info{
			display: flex;align-items: center;padding: 20upx 0;
			.store-right{
				margin-left: auto;margin-right: 0;font-size: 24rpx;color: #999;
				image{width: 50upx;height: 50upx;margin-bottom: 10upx;}
			}
			.store-left {
				.name{font-size: 30rpx;color: #333;font-weight: bold;line-height: 80upx;}
				.address{font-size: 24rpx;color: #999;}
			}
		}
	}
}
</style>