OpenDoorManageMini/pages/order/orderDetails.vue

<template>
	<view class="container">
		<u-navbar leftIconColor="#fff" titleStyle="color:#fff;fontSize:36rpx;" :autoBack="true" bgColor="#2C6FF3"
			:placeholder="true" title="订单详情"></u-navbar>

		<view class="content">
			<view v-if="detail.orderGoods&&detail.orderGoods.length>0" class="box">
				<view class="title">商品信息</view>
				<view class="goods-container martop">
					<view class="goods-item" v-for="(item,index) in detail.orderGoods" :key="item.id">
						<view class="flex align-center">
							<view class="spxx-image">
								<u--image radius="4" width="130rpx" height="130rpx" :src="item.goodsImgUrl"
									mode="aspectFit" :lazy-lord="true"></u--image>
							</view>
							<view class="flex flex-direction justify-between goods-msg" style="width:600rpx;">
								<view class="flex justify-between">
									<view style="width:360rpx;" class="goods-name">{{item.goodsName}}
										*{{item.totalNumber}}</view>
									<view class="text" style="color: red;" v-if="item.refundMoney&&item.refundMoney>0">
										已退款：￥{{$xy.delMoney(item.refundMoney)}}
									</view>
								</view>
								<view class="flex align-center justify-between">
									<view class="goods-price">
										单价：￥{{(Number(item.totalMoney)/Number(item.totalNumber))/100}}</view>
									<!--<view class="">应收：￥2.00</view>
											<view class="">实收：￥2.00</view> -->
								</view>
								<!-- <view class="">优惠活动：暂无</view> -->
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="box">
				<view class="title">订单信息</view>
				<view class="orderinformation-container martop">
					<view class="flex align-center">
						<view class="">
							<view class="oc-name">订单编号：</view>{{detail.id||'/'}}<text class="under-line-text"
								@tap="copy(detail.id)">复制</text>
						</view>
					</view>
					<view class="flex align-center">
						<view class="">
							<view class="oc-name">商户单号：</view>{{detail.payQueryOrderId||'/'}}<text
								class="under-line-text" @tap="copy(detail.payQueryOrderId)">复制</text>
						</view>
					</view>
					<view class="flex align-center">
						<view class="oc-name">设备：</view>{{detail.deviceId||'/'}}
					</view>
					<view class="flex align-center">
						<view class="oc-name">交易时间：</view>{{detail.payTime||'/'}}
					</view>
					<view class="flex align-center justify-between">
						<view class="phone">
							<view class="oc-name">手机号：</view>{{detail.memberTel||'/'}}<text class="under-line-text"
								@click="$tab.navigateTo(`/pages/order/userInfo?id=${detail.memberId}`)">会员信息</text><text
								v-if="detail.memberIsBlacklist&&detail.memberTel">已拉黑</text>
						</view>
						<view class="block" v-if="detail.memberTel&&!detail.memberIsBlacklist" @click="block">
							拉黑
						</view>
					</view>
					<view class="flex align-center">
						<view class="oc-name">订单状态：</view>{{detail.statusName||'/'}}
					</view>
					<view class="flex align-center">
						<view class="oc-name">商品总价：</view>￥{{$xy.delMoney(detail.orderTotalMoney)}}
					</view>
					<view class="">
						<view class="oc-name">优惠金额：</view>￥{{$xy.delMoney(detail.discountMoney)}}
					</view>
					<view class="">
						<view class="oc-name">订单总金额：</view>￥{{$xy.delMoney(detail.orderTotalMoney)}}
					</view>
					<view class="flex align-center justify-end" style="margin-top: 26rpx;">
						<view class="marleft">
							<xbutton bgColor="#F4F8FF" color="#2C6FF3" @tap="showlogs">交易日志</xbutton>
						</view>
						<view class="marleft">
							<xbutton bgColor="#F4F8FF" color="#2C6FF3">通知付款</xbutton>
						</view>
						<view class="marleft" v-if="detail.status==4">
							<xbutton bgColor="#F4F8FF" color="#2C6FF3" @tap="open">发起退款</xbutton>
						</view>
						<view class="marleft">
							<xbutton bgColor="#F4F8FF" color="#2C6FF3" @tap="showVideoView">查看交易视频</xbutton>
						</view>
					</view>
				</view>
			</view>

			<view class="box">
				<view class="title">支付信息</view>
				<view class="payments-container martop">
					<view class="flex align-center">
						<view class="oc-name">支付时间：</view>{{detail.payTime||'/'}}
					</view>
					<view class="">
						<view class="oc-name">支付方式：</view>{{$xy.getPayType(detail.payType)}}
					</view>
					<view class="">
						<view class="oc-name">支付金额：</view>￥{{$xy.delMoney(detail.payMoney)}}
					</view>
					<view class="flex align-center">
						<view class="">
							<view class="oc-name">支付订单号：</view>{{detail.payOrderId||'/'}}<text class="under-line-text"
								@tap="copy(detail.payOrderId)">复制</text>
						</view>
					</view>
					<view class="">
						<view class="oc-name">支付状态：</view>{{detail.payStatusName||'/'}}
					</view>
				</view>
			</view>

			<view class="box" v-if="refundDetail.id">
				<view class="title">用户退款记录</view>
				<view class="userrefundrecord-container martop">
					<view class="title1 martop">客户申请</view>
					<view class="">
						<view class="oc-name">申请时间：</view>{{refundDetail.createTime||'/'}}
					</view>
					<!-- <view class="">退款金额：￥{{refundDetail.createTime}}</view> -->
					<view class="">
						<view class="oc-name">用户备注：</view>{{refundDetail.remark||'/'}}
					</view>
					<view class="">
						<view class="oc-name">退款原因：</view>{{refundDetail.reason||'/'}}
					</view>
					<view class="title1 martop">退款产品</view>
					<block v-for="(item,index) in refundDetail.goodsList" :key="item.id">
						<u--image radius="4" width="130rpx" height="110rpx" :src="item.goodsImgUrl" mode="widthFix"
							:lazy-lord="true"></u--image>
						<view class="">{{item.goodsName}} *{{item.totalNumber}}</view>
						<!-- 	<view class="flex align-center justify-between">
							<view class="">商品原价：￥{{item.totalNumber}}</view>
							<view class="">商品卖价：￥{{item.sellPrice}}</view>
							<view class="">商品总价：￥{{item.totalMoney}}</view>
						</view> -->
					</block>
					<view class="">
						<view class="oc-name">优惠活动：</view>无
					</view>
					<view class="title1 martop">商家处理</view>
					<view class="">
						<view class="oc-name">处理结果：</view>{{refundDetail.refundStatusDesc||'/'}}
					</view>
				</view>
			</view>
		</view>

		<view :hidden="hiddenOrderVideos" class="popup_content">
			<view class="flex">
				<video id="myVideo" :src="videoUrl" style="width:100%;height: 372rpx; margin: 10rpx 10rpx;"></video>
			</view>
			<view class="flex" style="margin-top: 10rpx;">
				<view class="marleft">
					<xbutton size='medium' round='25rpx' padding='0rpx 20rpx' bgColor='#2C6FF3' @tap="playVideo(0)">主视频
					</xbutton>
				</view>
				<view class="marleft">
					<xbutton size='medium' round='25rpx' padding='0rpx 20rpx' bgColor='#2C6FF3' @tap="playVideo(1)">副视频
					</xbutton>
				</view>
			</view>
		</view>
		<view class="popup_overlay" :hidden="hiddenOrderVideos" @click="closeVideoView()"></view>

		<xpopup :show="show" @close="close" @confirm="submit" :showBtn="true" title="拉黑">
			<!-- 拉黑 -->
			<view class="pop-content">
				是否确定拉黑该用户?
			</view>
		</xpopup>

		<u-popup :show="refundShow" mode="center" :safeAreaInsetBottom="false" @close="refundShow=false">
			<view class="refund-container">
				<u-radio-group placement="row" v-model="radioType" @change="radioChange">
					<u-radio :customStyle="{marginRight: '24rpx'}" activeColor="#2C6FF3" label="商品退款" name="2">
					</u-radio>
					<u-radio activeColor="#2C6FF3" label="金额退款" name="1"></u-radio>
				</u-radio-group>
				<view v-if="radioType=='2'">
					<view class="martop" v-for="(item,index) in orderGoods" :key="item.id">
						<view class="flex align-center" @tap="checked(item)">
							<view class="checked">
								<image v-if="item.checked"
									src="https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/commodity/selected.png"
									mode="widthFix">
								</image>
								<image v-else
									src="https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/commodity/select.png"
									mode="widthFix"></image>
							</view>
							<view class="">{{item.goodsName}}</view>
						</view>
						<view class="flex align-center" style="margin-top: 24rpx;">
							<u-number-box button-size="30" v-model="item.totalNumber" class='martop'></u-number-box>
							<view style="margin-left: 30rpx;">
								￥{{item.totalNumber*item.price}}
								<!-- 	<u--input placeholder="退款金额" @blur="refundGoodsChange" type="digit" disabled
									v-model="item.totalMoney" border="surround">
								</u--input> -->
							</view>
						</view>
					</view>
				</view>
				<view class="flex align-center" style="margin-top: 24rpx;" v-else>
					<view style="width:200rpx">
						退款金额
					</view>
					<view class='marleft' style="width: 100%;">
						<u--input placeholder="退款金额" @blur="refundGoodsChange" type="digit" v-model="refundMoney"
							border="surround">
						</u--input>
					</view>
				</view>
				<view class='' style="margin-top: 24rpx;" @click="actionsheetChange">
					<u--input clearable readonly suffixIcon="arrow-down" v-model="refundReasonName" border="surround"
						suffixIconStyle="color: #909399" placeholder="退款理由">
					</u--input>
				</view>
				<view class='' style="margin-top: 24rpx;">
					<u--textarea v-model="description" placeholder="备注"></u--textarea>
				</view>
				<view class="" style="margin-top: 24rpx;" v-if="radioType=='2'">总退款金额：￥{{refundTotalMoney}}</view>
				<view class="flex align-center justify-end" style="margin-top: 24rpx;">
					<view class="">
						<xbutton width='200rpx' @click='refundShow=false'>取消</xbutton>
					</view>
					<view class='marleft'>
						<xbutton width='200rpx' @click="refundSure">确定</xbutton>
					</view>
				</view>
			</view>
		</u-popup>

		<u-action-sheet :show="actionSheetShow" :actions="actions" :title="title" @close="actionSheetShow = false"
			@select="actionsheetSelect($event)"></u-action-sheet>
	</view>
</template>

<script>
	import {
		byId,
		refundDetail,
		setBlacklist,
		refundByMerc
	} from "@/api/order/order.js"
	import getDict from "@/utils/getDict.js"
	export default {
		data() {
			return {
				id: null,
				hiddenOrderVideos: true,
				selOrder: undefined,
				videoUrl: '',
				detail: {},
				refundDetail: {},
				show: false,

				refundShow: false,
				radioType: '2',
				remark: '',

				orderGoods: null,
				createTime: null,
				description: null,
				refundReason: null,
				refundReasonName: null,
				actions: [],
				actionSheetShow: false,
				refundMoney: ''
			}
		},

		computed: {
			refundTotalMoney() {
				let num = 0;
				if (this.orderGoods) {
					this.orderGoods.forEach(i => {
						if (i.checked) {
							num += Number(i.totalNumber) * i.price
						}
					})
				}
				return num
			}
		},

		onLoad(o) {
			this.id = o.id;
			this.createTime = o.createTime
		},

		onShow() {
			this.getbyId()
			this.getRefundDetail()
		},

		methods: {
			copy(text) {
				uni.setClipboardData({
					data: text,
					success: (data) => {
						uni.showToast({
							title: '复制成功'
						})
					},
					fail: function(err) {

					},
					complete: function(res) {

					}
				})
			},
			getbyId() {
				byId({
					id: this.id
				}).then(res => {
					if (res.code == 200) {
						this.detail = res.data
					}
				})
			},

			getRefundDetail() {
				refundDetail({
					orderId: this.id
				}).then(res => {
					if (res.code == 200) {
						this.refundDetail = res.data
					}
				})
			},
			showVideoView() {

				this.hiddenOrderVideos = false;
				var urls = this.detail.video.split(',');
				this.detail.url0 = urls[0];
				this.detail.url1 = urls[1];
				this.playVideo(0);
			},
			playVideo(o) {
				if (0 == o) {
					this.videoUrl = this.detail.url0;
				} else {
					this.videoUrl = this.detail.url1;
				}
			},
			closeVideoView() {
				this.videoUrl = '';
				this.hiddenOrderVideos = true;
			},

			block() {
				this.show = true
			},

			// 关闭弹框
			close(e) {
				this.show = false
			},

			// 弹框确定
			submit() {
				setBlacklist({
					memberId: this.detail.memberId
				}).then(res => {
					this.$modal.msg('拉黑成功~')
					this.getbyId()
				}).catch(err => {

				})
				this.close()
			},

			showlogs() {
				this.$tab.navigateTo('/pages/order/orderLogs?id=' + this.detail.activityId);
			},

			manualPayment() {
				this.$tab.navigateTo('/pages/order/orderDel?id=' + this.detail.id + '&deviceId=' + this.detail
					.deviceId)
			},

			open() {
				this.refundShow = true
				getDict('order_refund_refund_reason').then(res => {
					let actions = res.map(i => {
						return {
							type: i.value,
							name: i.msg
						}
					})
					this.actions = actions
				}).catch(err => {

				})

				this.orderGoods = JSON.parse(JSON.stringify(this.detail.orderGoods))
				this.orderGoods.forEach(i => {
					i.price = this.$xy.delMoney(i.totalMoney) / i.totalNumber
					i.totalMoney = this.$xy.delMoney(i.totalMoney)
				})
			},

			//退款选项
			radioChange(e) {},

			//选中商品
			checked(item) {
				this.orderGoods.forEach(i => {
					if (i.id == item.id) {
						i.checked = !i.checked
					}
				})
				this.orderGoods = JSON.parse(JSON.stringify(this.orderGoods))
			},

			refundGoodsChange(e) {
				if (!this.$xy.testPrice(e)) {
					this.$modal.msg('输入价格最低为分！')
				}
			},

			// 退款处理确认按钮
			refundSure() {
				let params = {}
				if (this.radioType == 2) { //订单商品退款
					let ordersGoods = [];
					for (var i = 0; i < this.orderGoods.length; i++) {
						let item = this.orderGoods[i]
						if (item.checked) {
							if (!this.$xy.testPrice(item.totalMoney)) {
								this.$modal.msg('输入价格最低为分！')
								return
							}
							ordersGoods.push({
								orderGoodsId: item.id,
								goodsNum: item.totalNumber,
								price: (item.totalMoney / Number(item.totalNumber)) * 100
							})
						}
					}
					if (ordersGoods && ordersGoods.length == 0) {
						this.$modal.msg('请选择退款商品！')
						return
					}
					params = {
						refundWay: this.radioType,
						orderId: this.id,
						createTime: this.createTime,
						refundGoods: ordersGoods,
						description: this.description,
						reason: this.refundReason
					}

					console.log('params', params)

				} else { //金额退款
					if (!this.refundMoney) {
						this.$modal.msg('请选择输入退款金额！')
						return
					}
					params = {
						refundWay: this.radioType,
						orderId: this.id,
						createTime: this.createTime,
						description: this.description,
						reason: this.refundReason,
						refundMoney: this.refundMoney * 100
					}
				}

				refundByMerc(params).then(res => {
					if (res.code == 200) {
						this.getbyId()
						this.getRefundDetail()
						setTimeout(() => {
							this.$modal.showToast('订单处理成功~')
						}, 1000)
					} else {
						this.$modal.showToast('订单处理失败~')
					}
					this.orderGoods = null;
					this.refundShow = false;
				})
			},

			actionsheetChange() {
				console.log(123)
				this.actionSheetShow = true;
			},

			actionsheetSelect(e) {
				this.refundReason = e.type
				this.refundReasonName = e.name
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 24rpx;
		line-height: 50rpx;

		.content {
			overflow: hidden;
		}

		.text {
			color: #2C6FF3;
		}

		.martop {
			margin-top: 12rpx;
		}

		.marleft {
			margin-left: 10rpx;
		}



		.xian {
			border-bottom: 1px solid #5b5b5b;
			margin: 20rpx 0;
		}

		.title {
			font-size: 32rpx;
			line-height: 32rpx;
			font-weight: 800;
			color: #333;
		}

		.title1 {
			font-size: 28rpx;
			font-weight: 700;
			color: #333;
			line-height: 50rpx;
			position: relative;
			padding-left: 16rpx;

			&::before {
				content: '';
				width: 5rpx;
				height: 24rpx;
				background: #2C6FF3;
				position: absolute;
				left: 4rpx;
				top: 50%;
				transform: translateY(-60%);
			}
		}

		.under-line-text {
			font-size: 26rpx !important;

			font-weight: 500;
			font-style: italic;
			text-decoration: underline;
			color: #2C6FF3 !important;
			margin-left: 24rpx;
			background-color: #fff !important;
		}

		.oc-name {
			display: inline-block;
			width: 170rpx;
		}

		.payments-container,
		.userrefundrecord-container,
		.orderinformation-container {
			background-color: #fff;
			color: #777777;
			padding: 20rpx 0;
			border-radius: 15rpx;
		}

		.orderinformation-container {
			.phone {
				>text {
					display: inline-block;
					background-color: #5b5b5b;
					color: #fff;
					font-size: 22rpx;
					padding: 0 12rpx;
					border-radius: 6rpx;
					margin-left: 12rpx;
					line-height: 36rpx;
				}
			}

			.block {
				width: 92rpx;
				height: 38rpx;
				background: #F4F8FF;
				border-radius: 8rpx;
				font-size: 26rpx;
				line-height: 38rpx;
				font-weight: 500;
				color: #2C6FF3;
				text-align: center;
			}
		}

		.box {
			background-color: #fff;
			padding: 28rpx 25rpx;
			border-radius: 14rpx;
			margin-top: 20rpx;

			.goods-container {
				background-color: #fff;
				border-radius: 15rpx;
				margin-top: 35rpx;

				.goods-item {
					background: #F6F7FA;
					border-radius: 14rpx;
					padding: 8rpx;
					margin-top: 20rpx;

					.goods-msg {
						margin-left: 27rpx;

						.goods-name {
							font-size: 26rpx;
							font-weight: 800;
							color: #333333;
						}

						.goods-price {
							font-size: 24rpx;
							font-weight: 500;
							color: #555555;
						}
					}
				}

				.spxx-image {
					height: 130rpx;
				}
			}
		}
	}

	.popup_overlay {
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: black;
		z-index: 1001;
		-moz-opacity: 0.8;
		opacity: .80;
		filter: alpha(opacity=88);
	}

	.popup_content {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 700rpx;
		height: 500rpx;
		margin-left: -350rpx;
		margin-top: -250rpx;
		border: 10px solid white;
		background-color: white;
		z-index: 1002;
		overflow: auto;
	}

	.pop-content {
		padding: 24rpx;
	}

	.refund-container {
		background-color: #fff;
		width: 600rpx;
		padding: 20rpx 30rpx;

		.checked {
			width: 36rpx;
			height: 36rpx;
			margin-right: 12rpx;

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}
	}
</style>