high-mini/physical-merchants/classify/order/orderDetail.vue

<template>
	<view class="backcor9 pd-main pdb60 headsbg">


		<!-- 待支付 -->
		<view v-if="recinfo.orderStatus == 1" class="order-de-title pd-main">
			<view class="font22 fcor333">
				待支付
			</view>
			<view class="font16 fcor666 mart10">
				<text class="fcorred paddtright10">{{countdownm}}:{{countdowns}}</text>后订单自动取消
			</view>
		</view>
		<!-- 其他 -->
		<view v-if="recinfo.orderStatus != 1"  class="order-de-title pd-main">
			<view class="font22 fcor333">
				{{typeText[recinfo.orderStatus]}}
			</view>
			<view class="font16 fcor666 mart10">
				您的订单{{typeText[recinfo.orderStatus]}}
			</view>
		</view>

		<view v-if="recinfo.orderStatus != 1" class=" marb10 backcorfff height50 fcor333 font15 border-8r">
			<view class="width94">感谢您信任嗨森逛，欢迎再次消费</view>
		</view>

		<!-- 待支付时支持修改地址,暂时先不弄 -->
		<!-- <view v-if="status == 0" class="marb20 pd-main backcolorfff border-8r">
			<view class="flex-center-sp pd-tb10">
				<view class="">
					<view class="fontwig6 font18">金科才能收到你看得出纳思达</view>
					<view class="mart5 fcor666">利<text class="paddleft10">15652365478</text></view>	
				</view>
				<view class="align-fs edit-msg " @click="editOrder">
					修改
				</view>
			</view>
		</view> -->

		<view class=" pd-main backcolorfff border-8r">
			<!-- 商品信息 -->
			<view v-for="(item,index) in goodsList" :key="index" class="paddtop10  border-b-666 ">
				<view class="flex-center-sp">
					<view class="">
						<image class="st-img" :src="imageUrl+item.goodsImg" mode="aspectFill"></image>
					</view>
					<view class="flex-1 flex-center-sp">
						<view class="width60 paddleft10">
							<view class="marb10 font16 fontwig6">{{item.goodsName}}</view>
							<view class="marb5 font13 fcor666">规格: {{item.goodsSpecName}}</view>
							<view class="fcor666 font12">数量: {{item.saleCount}}</view>
						</view>
						<view class="font16 tr  align-fs">
							<view class="fontwig6" v-if="recinfo.memDiscountId">¥ {{item.goodsPrice}}</view>
							<view class="fontwig6" v-if="!recinfo.memDiscountId">¥ {{item.goodsActualPrice}}</view>
							
						</view>
					</view>
				</view>	
				<view class="dis-flex flex-end paddtop10 paddbotm10 ">
					<!-- 已支付 判断发货与否，申请退款，申请售后 -->
					<!-- <view class="btn1" v-if="recinfo.orderStatus == 2" @click="applyRefund">申请退款</view> -->
					<view class="btn1" v-if="recinfo.orderStatus != 1 && recinfo.orderStatus != 5" @click="checkWuliu(item.id,item.ext6)">查看物流</view>
				</view>
			</view>

			<!-- 当商品超过3个的时候 -->
			<view v-if="!moreThanThree&&isShow" class="goodsMore flex-center" @click="checkMore">
				还有{{goodsList2.length}}种商品<text class="icon-ymt to-down"></text>
			</view>
			<block v-if="moreThanThree">
				<view v-for="(item,index) in goodsList2" :key="index" class="paddtop10 border-b-666 ">
					
					<view class="flex-center-sp">
						<view class="">
							<image class="st-img" :src="imageUrl+item.goodsImg" mode="aspectFill"></image>
						</view>
						<view class="flex-1 flex-center-sp">
							<view class="width60 paddleft10">
								<view class="marb10 font16 fontwig6">{{item.goodsName}}</view>
								<view class="marb5 font13 fcor666">规格: {{item.goodsSpecName}}</view>
								<view class="fcor666 font12">数量: {{item.saleCount}}</view>
							</view>
							<view class="font16 tr  align-fs">
								<view class="fontwig6" v-if="recinfo.memDiscountId">¥ {{item.goodsPrice}}</view>
								<view class="fontwig6" v-if="!recinfo.memDiscountId">¥ {{item.goodsActualPrice}}</view>
						
							</view>
						</view>
					</view>
					
					<view class="dis-flex flex-end paddtop10 paddbotm10 ">
						<!-- 已支付 判断发货与否，申请退款，申请售后 -->
						<!-- <view class="btn1" v-if="recinfo.orderStatus == 2" @click="applyRefund">申请退款</view> -->
						<view class="btn1" v-if="recinfo.orderStatus != 1 && recinfo.orderStatus != 5" @click="checkWuliu(item.id,item.ext6)">查看物流</view>
					</view>
				</view>
			</block>
			<view v-if="moreThanThree" class="goodsMore flex-center" @click="checkMore">
				共{{recinfo.highChildOrderList.length}}种商品<text class="icon-ymt to-up"></text>
			</view>

			<!-- 商品金额 -->
			<view class="flex-center-sp pd-tb10">
				<view class="fontsize">商品金额</view>
				<view class="fontwig6"><text class="paddtright5">¥</text>{{goodsPrice | numFormat}}</view>
			</view>
			
			<!-- 运费 -->
			<view class="flex-center-sp pd-tb10">
				<view class="fontsize">运费
					<!-- <text class="icon-ymt question fcor666 font16 paddleft5"></text> -->
				</view>
				<view class="fontwig6">
					<view v-if="recinfo.goodsOrder" >
						<text class="paddtright5">¥</text>{{recinfo.goodsOrder.freightPrice || 0}}
					</view>
			
				</view>
			</view>
			
			<!-- 优惠券 -->
			<view class="flex-center-sp pd-tb10">
				<view class="fontsize">优惠券</view>
				<view class="fontwig6 fcorred">-<text class="paddtright5">¥</text>{{recinfo.deductionCouponPrice}}
				</view>
			</view>

			

			<!-- 积分 -->
			<view class="flex-center-sp pd-tb10">
				<view class="fontsize">积分抵扣</view>
				<view class="fontwig6 fcorred">-<text class="paddtright5">¥</text>{{(recinfo.payGold / 100).toFixed(2)}}
				</view>
			</view>
			<!--支付优惠 -->
			<view class="flex-center-sp pd-tb10">
				<view class="fontsize">支付优惠</view>
				<view class="fontwig6 fcorred">-<text class="paddtright5">¥</text>0</view>
			</view>
			<!-- 价格总额 -->
			<view class="tr fontwig6  pd-tb10">
				<!-- <text class="paddtright10">已优惠<text class="fcorred">¥ 12.01</text></text> -->
				<view v-if="recinfo.orderStatus == 1 ||recinfo.orderStatus == 5 " class="dis-flex flex-end">商品总金额<text class="margle10 font22">¥{{recinfo.payPrice | numFormat}}</text> </view>
				<view v-else class="dis-flex flex-end">
					实付
					<view class="font22">
						<text class=" margle10 paddtright5">¥</text>{{recinfo.payRealPrice}}
					</view>
				</view>
			</view>


			
		</view> 

		<!-- 物流信息 -->
		<view v-if="recinfo.orderStatus != 1 && recinfo.orderStatus != 5" class="pd-lr backcolorfff border-8r">

			<!-- 收货信息 -->
			<view v-if="recinfo.goodsDeliveryAddress" class="flex-center-sp pd-tb10 bordert">
				<view class="fontsize align-fs width80px">收货信息</view>
				<view class="fcor666 flex-1 tr font16">
					<view class=" ">
						{{recinfo.goodsDeliveryAddress.regionName +' '+recinfo.goodsDeliveryAddress.address}}</view>
					<view class=" ">{{recinfo.goodsDeliveryAddress.consignee +' '+recinfo.goodsDeliveryAddress.phone}}
					</view>
				</view>
			</view>
			<!-- 物流信息 -->
			<!-- <view class="flex-center-sp pd-tb10 ">
				<view class="fontsize width80px">物流信息</view>
				<view class="fcor666 font16 " @click="checkWuliu">
					查看物流信息<text class="icon-ymt to-right fcor666 font16 paddleft5"></text>
				</view>
			</view> -->
			<!-- 订单编号 -->
			<view class="flex-center-sp pd-tb10 ">
				<view class="fontsize width80px">订单编号</view>
				<view class="fcor666 flex-center-sp font16">
					<text class="tr flex-1">{{orderId}}</text>
					<text class=" margle10 font12 copy-num fcor666" @click="copyText(orderId)">复制</text>
				</view>
			</view>
			<!-- 下单时间 -->
			<view class="flex-center-sp pd-tb10 ">
				<view class="fontsize width80px">下单时间</view>
				<view class="font16 fcor666">
					{{recinfo.createTime | formatDate('-')}}
				</view>
			</view>
			<!-- 支付方式 -->
			<view class="flex-center-sp pd-tb10 ">
				<view class="fontsize width80px">支付方式</view>
				<view class="font16 fcor666">
					<view class=" fotrt " v-if="recinfo.payType == 1">支付宝</view>
					<view class=" fotrt " v-if="recinfo.payType == 2">微信支付</view>
					<view class=" fotrt " v-if="recinfo.payType == 3">积分兑换</view>
					<view class=" fotrt " v-if="recinfo.payType == 4">汇联通工会卡</view>
					<view class=" fotrt " v-if="recinfo.payType == 5">银联</view>
				</view>
			</view>
			<!-- 备注 -->
			<view class="flex-center-sp pd-tb10 ">
				<view class="fontsize width80px">备注</view>
				<view class="fcor666 font16 ">
					{{recinfo.remarks || "无"}}
				</view>
			</view>
		</view>
		
		<view v-if="recinfo.orderStatus == 1 || recinfo.orderStatus == 5" class="pd-lr  backcolorfff border-8r">
		
			<!-- 收货信息 -->
			<view v-if="recinfo.goodsDeliveryAddress" class="flex-center-sp pd-tb10 bordert">
				<view class="fontsize align-fs width80px">收货信息</view>
				<view class="flex-1 tr fcor666 font16">
					<view class=" ">
						{{recinfo.goodsDeliveryAddress.regionName +' '+recinfo.goodsDeliveryAddress.address}}</view>
					<view class=" ">{{recinfo.goodsDeliveryAddress.consignee +' '+recinfo.goodsDeliveryAddress.phone}}
					</view>
				</view>
			</view>
			<!-- 订单编号 -->
			<view class="flex-center-sp pd-tb10 ">
				<view class="fontsize width80px">订单编号</view>
				<view class="fcor666 flex-center-sp font16">
					<text class="tr flex-1">{{orderId}}</text>
					<text class=" margle10 font12 copy-num fcor666" @click="copyText(orderId)">复制</text>
				</view>
			</view>
			<!-- 下单时间 -->
			<view class="flex-center-sp pd-tb10 ">
				<view class="fontsize width80px ">下单时间</view>
				<view class="font16 fcor666">
					{{recinfo.createTime | formatDate('-')}}
				</view>
			</view>
			<!-- 备注 -->
			<view class="flex-center-sp pd-tb10 ">
				<view class="fontsize width80px ">备注</view>
				<view class="fcor666 font13 font16">
					{{recinfo.remarks || "无"}}
				</view>
			</view>
		</view>

		<!-- 待支付时底部的按钮 -->
		<view v-if="recinfo.orderStatus == 1" class="toPay font14  backcolorfff">
			<view class="btn" @click="cancelOrder">取消订单</view>
			<!-- <view class="btn" @click="editOrder">修改订单</view> -->
			<view class="btn bgred" @click="payOrder">立即支付{{countdownm}}:{{countdowns}}</view>
		</view>
		<!--  -->
		<!-- <view v-if="recinfo.orderStatus != 1" class="toPay font14  backcolorfff">
			<view class="btn oneMore" @click="oneMoreOrder">再来一单</view>
			<view class="btn" @click="deleteOrder">删除订单</view>
			
		</view> -->
		<view v-if="recinfo.orderStatus != 1" class="toPay font14  backcolorfff">
			
			<!-- #ifdef MP-->
			<button open-type="contact" class="btn" style="margin: 0; box-sizing: content-box;line-height: unset;">
				联系客服
				<!-- <image src="../../../static/img/home/cusser.png" mode="widthFix" class="icon30"></image> -->
			</button>

			<!-- #endif -->
			<!-- #ifdef H5-->
			<view class="btn" @click="playPhone">联系客服</view>
			<!-- #endif -->
			
			
			
		</view>
		<wuliuPopup ref="wuliu"></wuliuPopup>
	</view>
</template>

<script>
	import wuliuPopup from '@/physical-merchants/classify/order/wuliuPupup/wuliuPupup.vue'

	import {
		getDetailByOrderNo,
		cancel
	} from '@/Utils/Api.js'

	const app = getApp()
	export default {
		data() {
			return {
				
				countdownh: '', //倒计时时
				countdownm: '', // 倒计时分
				countdowns: '', //倒计时秒
				timers: null,
				orderId: '', //订单id
				recinfo: {},
				typeText: {
					1: '待支付',
					2: '已支付',
					3: '已完成',
					4: '已退款',
					5: '已取消',
					6: '退款中',
					7: '退款失败'
				},
				imageUrl: app.globalData.imgUrl,
				goodsList: [],
				goodsList2: [],
				goodsListAll: [],
				moreThanThree: false,
				isShow: false,


			}
		},
		components: {
			wuliuPopup
		},
		computed: {
			goodsPrice() {
				if (this.recinfo.memDiscountId) {
					var str = 0;
					this.goodsListAll.map(item => {
						str = parseFloat((str + (item.saleCount * item.goodsPrice)).toFixed(2))
					})

					return str;
				} else {
					var str2 = 0;
					this.goodsListAll.map(item => {
						str2 = parseFloat((str2 + (item.saleCount * item.goodsActualPrice)).toFixed(2))
					})
					return str2;
				}


			}
		},
		onLoad(option) {
			this.orderId = option.id
			// console.log(this.orderId, "this.orderId")
		},
		onUnload() {
			clearInterval(this.timers);
		},
		onShow() {
			//页面显示时，加载订单信息
			this.getDetailByOrder();
		},
		filters: {
			//过滤器 用于格式化时间
			formatDate: function(value, spe = '/') {
				let data = new Date(value);
				let year = data.getFullYear();
				let month = data.getMonth() + 1;
				let day = data.getDate();
				let h = data.getHours();
				let mm = data.getMinutes();
				let s = data.getSeconds();
				month = month >= 10 ? month : "0" + month;
				day = day >= 10 ? day : "0" + day;
				h = h >= 10 ? h : "0" + h;
				mm = mm >= 10 ? mm : "0" + mm;
				s = s >= 10 ? s : "0" + s;
				return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`;
			}
		},
		methods: {
			//查询订单详情
			getDetailByOrder() {
				uni.showLoading({
					title: '加载中...'
				})
				let params = {
					orderNo: this.orderId,
				}
				getDetailByOrderNo(params).then(res => {
					
					setTimeout(()=>{
						uni.hideLoading();
					},100)
					
					
					if (res.return_code == '000000') {
						this.recinfo = res.return_data;
						// if (res.return_data.productType == 6) {
						// 	this.getOrderByOrderNo();
						// }

						this.goodsListAll = this.recinfo.highChildOrderList;

						if (this.recinfo.highChildOrderList.length > 3) {
							this.isShow = true;
							this.goodsList = this.recinfo.highChildOrderList.slice(0, 3)
							this.goodsList2 = this.recinfo.highChildOrderList.slice(3)
						} else {
							this.isShow = false;
							this.goodsList = this.recinfo.highChildOrderList
						}



						//待付款
						if (res.return_data.orderStatus == 1) {
							this.timers = setInterval(() => {
								this.showtime()
							}, 1000)
						}
					}
				})
			},
			showtime() {
				var nowtime = (new Date()).getTime(); //获取当前时间
				var endtime = this.recinfo.createTime + 600000; //定义结束时间 600000是10分钟
				var lefttime = endtime - nowtime; //距离结束时间的毫秒数
				var leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)); //计算天数
				var lefth = Math.floor((lefttime / (1000 * 60 * 60) % 24) + leftd * 24) < 10 ? "0" + Math.floor((lefttime /
					(1000 * 60 * 60) % 24) + leftd * 24) : Math.floor((lefttime / (1000 * 60 * 60) % 24) + leftd *
					24); //计算小时数
				var leftm = Math.floor(lefttime / (1000 * 60) % 60) < 10 ? "0" + Math.floor(lefttime / (1000 * 60) % 60) :
					Math.floor(lefttime / (1000 * 60) % 60); //计算分钟数
				var lefts = Math.floor(lefttime / 1000 % 60) < 10 ? "0" + Math.floor(lefttime / 1000 % 60) : Math.floor(
					lefttime / 1000 % 60); //计算秒数
				this.countdownh = lefth; //返回倒计时的字符串
				this.countdownm = leftm; //返回倒计时的字符串
				this.countdowns = lefts; //返回倒计时的字符串
				// 倒计时结束时，显示00:00:00
				if (lefttime < 0) {
					clearInterval(this.timers);
					this.getDetailByOrder();
					this.countdownh = this.countdownm = this.countdowns = "00";
				}
			},
			// 查看更多商品
			checkMore() {
				this.moreThanThree = !this.moreThanThree
			},
			// 查看物流
			checkWuliu(id,status) {
				// let logisticsNo = this.recinfo.goodsOrder.logisticsNo;

				if (status == null) {
					uni.showToast({
						title: '暂无数据',
						icon: 'none',
						duration: 2000
					})
					return
				}

				this.$refs.wuliu.show(id)
			},

			// 点击修改订单
			editOrder() {
				// uni.navigateTo({
				// 	url:'/physical-merchants/classify/order/editOrder'
				// })
			},
			// 取消订单
			cancelOrder() {


				let that = this;
				uni.showModal({
					title: '取消订单',
					content: '确定取消此订单？',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '加载中...'
							})
							let params = {
								orderNo: this.recinfo.orderNo
							}
							cancel(params).then(res => {
								if (res.return_code == '000000') {
									uni.hideLoading();
									uni.showToast({
										title: res.return_data,
										icon: 'none',
										duration: 2000
									})
									let pages = getCurrentPages() //页面栈
									let prePage = pages[pages.length - 2] //上一页
									prePage.$vm.reFresh = Math.random() //触发上一页监听器
									uni.navigateBack() //返回上一页
								} else {
									uni.showToast({
										title: res.return_msg,
										icon: 'none',
										duration: 2000
									})
									uni.hideLoading()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});


			},
			// 支付订单
			payOrder() {
				let obj = {
					orderNo : this.recinfo.orderNo,
					createTime:this.recinfo.createTime,
					payPrice:this.recinfo.payPrice
				}
				obj = JSON.stringify(obj)
				uni.navigateTo({
					url: '/physical-merchants/classify/order/pay?obj=' + obj
				})
			},
			//联系客服
			playPhone() {
					uni.showModal({
						title: '客服',
						content: '4006780738',
						success: function(res) {
							if (res.confirm) {
								uni.makePhoneCall({
									phoneNumber: '4006780738', //电话号码
									success: function(e) {
										console.log(e);
									},
									fail: function(e) {
										console.log(e);

									}
								})
							}
						}
					})
			},


			// 订单取消时的再来一单
			oneMoreOrder() {

			},
			// 订单取消时的删除订单
			deleteOrder() {

			},
			// 复制的
			copyText(text) {



				// #ifdef H5
				this.$copyText(text).then(
					res => {
						uni.showToast({
							title: '复制成功'
						})
					}
				)
				// #endif
				// #ifndef H5
				uni.setClipboardData({
					data: text,
					success: () => {
						uni.showToast({
							title: '复制成功'
						})
					}
				})
				// #endif


			},
			// 申请退款
			applyRefund(){
				
				// 在这里需要判断商品是否已发货
				
				// 如果已发货 ==>去选择退货类型
				uni.navigateTo({
					url:"/physical-merchants/applyRefund/selectApplyRefund?msg="+encodeURIComponent(JSON.stringify(this.recinfo))
				})
				
				//如果未发货 ==>直接跳到申请页面
				// uni.navigateTo({
				// 	url:"/physical-merchants/applyRefund/applyRefund?msg="+encodeURIComponent(JSON.stringify(this.recinfo))+"&refundType="+1
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	
	
	.fontsize{
		font-size: 16px;
	}
	
	.bottomstu {
		position: fixed;
		bottom: 0px;
		border-top: 1px solid #cecdcd;
	}

	.cusservice {
		height: 30px;
		width: 90px;
		margin-right: 20px;
		border: 1px solid #6c6c6c;
		border-radius: 25px;
	}

	.headsbg {
		background: linear-gradient(to bottom, #3da7e7, #e8eff4) no-repeat;
		background-size: 100% 200px;

	}

	.width80px {
		// width: 80px;
	}

	.flex-center-sp {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flex-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.align-fs {
		align-self: flex-start;
	}

	.tr {
		text-align: right;
	}

	.flex-1 {
		flex: 1;
	}

	.st-img {
		width: 82px;
		height: 82px;
	}


	.goodsMore {
		padding: 10px 0;
		text-align: center;
		border-top: 1px solid #f6f6f6;
		border-bottom: 1px solid #f6f6f6;
	}

	// 商品金额
	.pd-tb10 {
		padding: 10px 0;
	}

	.td-lt {
		text-decoration: line-through;
	}

	.bordert {
		border-top: 2px solid #f6f6f6;
	}

	// 复制按钮
	.copy-num {
		padding: 0 5px;
		border: 1px solid #666666;
		border-radius: 5px;
		display: inline-block;
		vertical-align: middle;

	}

	// 修改按钮
	.edit-msg {
		border: 1px solid #D7D3D0;
		width: 50px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		border-radius: 15px;
	}

	.pdb60 {
		padding-bottom: 60px;
	}

	// 底部待支付按钮
	.toPay {
		height: 30px;
		padding: 10px 15px;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		border-top: 1px solid #f6f6f6;
		position: fixed;
		// bottom: 0;
		bottom:var(--window-bottom);
		right: 0;
		left: 0;

		

	}
	
	.btn1{
		height: 20px;
		padding: 5px 10px;
		border-radius: 15px;
		margin-left: 15px;
		border: 1px solid #f0f0f0;
		color: #666666;
		font-size: 16px;
	}
	
	.btn {
		height: 20px;
		padding: 5px 10px;
		border-radius: 15px;
		margin-left: 15px;
		border: 1px solid #666666;
		color: #666666;
		font-size: 16px;
		&.bgred {
			color: #ffffff;
			background-color: #FF2342;
			border: 1px solid #FF2342;
		}
	
		&.oneMore {
			color: #FF2342;
	
			border: 1px solid #FF2342;
		}
	}
</style>