wx_oms/orderList/orderDetails/orderDetails.vue

<template>
	<view class="details_body">
		<view class="details_body_car">
			<view class="details_body_car_lable">
				<view class="sign">
					<image style="width: 65%;height: 65%;" :src="details.siteImages"></image>
				</view>
				<view class="payLi felx justifyContent  alignItems">{{details.payAccountType==0?'个人':'企业'}}</view>
				<view
					:style="{background:paymentStatus(details.orderStatus).bg,color:paymentStatus(details.orderStatus).color}"
					class="payment felx justifyContent  alignItems">{{paymentStatus(details.orderStatus).text}}</view>
			</view>
			<view class="paymentInformation">
				<view class=" flex">
					<view></view>
					<view>
						<view class="Text">
							{{details.siteName}}
							<uni-icons @click="copy(details.siteName)" style="margin-left: 10rpx;" color="#bbbbbb"
								custom-prefix="iconfont" type="iconfuzhi" size="20"></uni-icons>
						</view>
						<view class="smallText">{{details.siteId}}</view>
					</view>
				</view>
				<view style="margin:33rpx 0;" class="flex">
					<view></view>
					<view>
						<view class="Text"> <text>{{details.customerName}}</text> <text
								style="margin-left:35rpx;">{{details.customerPhone}}</text>
							<uni-icons @click="copy(details.customerPhone)" style="margin-left: 10rpx;" color="#bbbbbb"
								custom-prefix="iconfont" type="iconfuzhi" size="20"></uni-icons>
						</view>
						<view class="smallText">{{details.customerId}}</view>
					</view>
				</view>
				<view class="flex">
					<view></view>
					<view>
						<view class="Text">{{details.accountCardCode?details.accountCardCode:'暂无'}}</view>
						<view v-if="details.companyName" class="smallText">{{details.companyName}}</view>
					</view>
				</view>
			</view>
			<view class="splitLine">
				<view style="margin-left: -20rpx;" class="splitLineyuan"></view>
				<view class="Line">
					<image src="@/static/line.png" style="width: 100%; height: 1px"></image>
				</view>
				<view style="margin-right: -20rpx;" class="splitLineyuan"></view>
			</view>
			<view style="padding: 0 43rpx;">
				<view class="price felx">
					<view>
						<view class="smallText">价格</view>
						<view class="bgtext">{{ details.realAmount}}<text style="position: relative;left: 20rpx;"
								class="Text">元</text>
						</view>
					</view>
					<view style="margin-left: 143rpx;">
						<view class="smallText">升数</view>
						<view class="bgtext">{{details.volume}} <text style="position: relative;left: 20rpx;"
								class="Text">L</text>
						</view>
					</view>
				</view>
				<view style="margin-top: 45rpx;" class="felx">
					<view class="olitype felx justifyContent alignItems Text">{{details.oilsCode}}</view>
					<view class="actualUnitPrice felx justifyContent alignItems">
						<view>
							<view class="bgtext">{{details.realPrice}}</view>
							<view class="smallText">实际单价</view>
						</view>
					</view>
					<view class="actualUnitPrice felx justifyContent alignItems">
						<view>
							<view class="bgtext">{{details.marketPrice}}</view>
							<view class="smallText">国际单价</view>
						</view>
					</view>
					<view class="actualUnitPrice felx justifyContent alignItems">
						<view>
							<view class="bgtext">{{details.sitePrice}}</view>
							<view class="smallText">油站单价</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="details.orderWfStatus==0" @tap='codeFn'
				:style="{marginBottom:!moreOpen?'':'0',background:'#228B22'}"
				class="writeOff felx justifyContent alignItems ">待核销</view>
			<view v-else :style="{marginBottom:!moreOpen?'':'0',background:'#BBBBBB'}"
				class="writeOff felx justifyContent alignItems ">已核销</view>
			<view v-if="!moreOpen" @click="moreOpen=!moreOpen"
				class="moreButten felx justifyContent alignItems smallText ">
				更多信息&退款信息
				<uni-icons :style="{transform:moreOpen?'rotate(180deg)':'rotate(0deg)',transition:'transform .3s' }"
					size="15" class="content-clear-icon" type="bottom" color="#c0c4cc"></uni-icons>
			</view>
			<view class="dxx" :style="{height:moreOpen?'265rpx':'0rpx'}">
				<view class="splitLine">
					<view style="margin-left: -20rpx;" class="splitLineyuan"></view>
					<view class="Line">
						<image src="@/static/line.png" style="width: 100%; height: 1px"></image>
					</view>
					<view style="margin-right: -20rpx;" class="splitLineyuan"></view>
				</view>
				<view class="more">
					<view @tap='moreOpen=false' style="display: flex; justify-content: space-between;" class="Text">
						{{details.orderSerialNumber}}
						<uni-icons
							:style="{transform:moreOpen?'rotate(0deg)':'rotate(180deg)',transition:'transform .3s' }"
							size="15" class="content-clear-icon" type="top" color="#c0c4cc"></uni-icons>

					</view>
					<view style="margin-bottom:33rpx;" class="smallText">{{details.createTime}}</view>
					<view @tap="refund" v-if="!customerList.includes(details.createSource)"
						:style="{background:details.orderStatus==1?'':'#bbbbbb'}"
						class="refund felx justifyContent alignItems">退款</view>
				</view>
			</view>
		</view>
		<view class="footerButten felx">
			<view @click="copy(details.orderSerialNumber)" class="copyButten felx  justifyContent alignItems">复制订单号
			</view>
			<!-- <button class="forwardButten felx justifyContent alignItems" open-type="share">分享</button> -->
		</view>
		<popup :show='show' @confirmFn='confirmFn' @closeFn='closeFn' :butten='butten'
			:styles="{height:'350rpx',width:'350rpx'}" v-model="iShow.seting">
			<view slot="coment">
				<view
					style="height: 350rpx;display: flex;align-items: center; width: 100%;justify-content: center;flex-wrap: wrap;flex-direction: column;">
					<view v-if="!details.secondChannelCode"
						style="width: 100%; font-size: 34rpx;text-align: center; margin-bottom: 15rpx;"
						class="smallText">核销二维码</view>
					<qrcode v-if="iShow.seting&&details.secondChannelCode" ref="qrcode" cid="2" loadMake iconSize="10"
						:val="details.secondChannelCode" unit="upx" background="#fff" foreground="#000" pdground="#000"
						onval @result="qrR" />
					<view v-if="!details.secondChannelCode">
						二维码生成错误
					</view>
				</view>
			</view>
		</popup>

	</view>
</template>

<script>
	import orderList from '@/api/orderList'
	import qrcode from '@/components/tki-qrcode/tki-qrcode'
	import tool from '@/utils/tool.js'

	import serve from '@/api/orderList/orderDetails.js'
	export default {
		onShareAppMessage(res) {
			return {
				title: '订单详情',
				path: '/orderList/orderDetails/orderDetails'
			}
		},
		components: {
			qrcode
		},
		data() {
			return {
				customerList: ['HLL', 'FENGTU'],
				details: {},
				show: {
					img: false,
					footer: false
				},
				iShow: {
					seting: false
				},
				moreOpen: false,
				val: '898989898',
				id: null,
				butten: {
					colse: '取消',
					confirm: '确定',
					coloseBg: '',
					coloseColor: '',
					confirmBg: '',
					confirmColor: ''
				},
				refundMap: new Map([
					[
						['FUYOU'], {
							serveTarget: serve.fuyouRefund,
							type: 'post'
						}
					],
					[
						['ZHIZHU', 'NEWHOPE', 'MUYUAN', 'G7CLUSTER-CAHNGJIU'], {
							serveTarget: serve.orderRefund,
							type: 'post'
						}
					],
					[
						['SHUNFENG'], {
							serveTarget: serve.sfRefund,
							type: 'post'
						}
					],
					[
						['ANNENG'], {
							serveTarget: serve.refund,
							type: 'get'
						}
					],
					[
						['YIGUANYOU', 'ANTU'], {
							serveTarget: serve.unifiedRefund,
							type: 'post'
						}
					],
				])
			}
		},

		onLoad(e) {
			if (e.jsData) {
				console.log(JSON.parse(e.jsData));
				this.id = JSON.parse(e.jsData).id
				this.getList(this.id)
			}
			// console.log('refundMap', this.refundMap)
		},
		methods: {
			refundNew() {
				let {
					createSource,
					id
				} = this.details
				if (!createSource) {
					uni.showToast({
						title: "未查询到该订单创建来源",
						icon: "none"
					})
					return
				}
				let keys = this.refundMap.keys()
				let result = null
				for (let key of keys) {
					if (key.includes(createSource)) {
						result = this.refundMap.get(key)
						break
					}
				}
				if (result) {
					let {
						type,
						serveTarget
					} = result
					let params = type === 'post' ? {
						id,
						orderId: id
					} : id
					serveTarget(params).then(res => {
						if (res.code === 20000) {
							uni.showToast({
								title: '退款成功',
								duration: 2000
							});
							setTimeout(() => {
								this.getList(id)
							}, 1000)
						}
					})
				} else {
					orderList.refund({
						id
					}).then(res => {
						if (res.code == 20000) {
							uni.showToast({
								title: '退款成功',
								duration: 2000
							});
							setTimeout(() => {
								this.getList(id)
							}, 1000)
						}
					})
				}
			},
			codeFn() {
				if (this.details.orderWfStatus == 0) {
					orderList.getOrderQrCodeOms(this.details.orderSerialNumber).then(res => {
						if (res.code == 20000) {
							console.log(res)
							this.val = res.data.codeStr
							this.iShow.seting = true
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})

				} else {
					this.iShow.seting = false
				}
			},
			refund() {
				if (this.details.orderStatus !== 1) return;
				// let that = this
				uni.showModal({
					title: '提示',
					content: '是否确认退款',
					success: (res) => {
						if (res.confirm) {
							this.refundNew()
							// orderList.refund({
							// 	id: that.id
							// }).then(res => {
							// 	if (res.code == 20000) {
							// 		uni.showToast({
							// 			title: '退款成功',
							// 			duration: 2000
							// 		});
							// 		setTimeout(() => {
							// 			that.getList(that.id)
							// 		}, 1000)
							// 	}
							// })
							// console.log('用户点击确定');
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			paymentStatus(e) {
				switch (e) {
					case 0:
						return {
							text: '待支付',
								color: '#EBC153',
								bg: '#FFF6DD'
						}
						break;
					case 1:
						return {
							text: '已支付',
								color: '#17A00E',
								bg: '#D1FFDA'
						}
						break;
					case -1:
						return {
							text: '支付失败',
								color: '#EC4645',
								bg: '#FFC8C8'
						}
						break;
					case 2:
						return {
							text: '已取消',
								color: '#999999',
								bg: '#E9E9E9'
						}
						break;
					case 3:
						return {
							text: '已退款',
								color: '#999999',
								bg: ''
						}
						break;
					case 4:
						return {
							text: '退款中',
								color: '#EBC153',
								bg: ''
						}
						// return '退款中'
						break;
					case 5:
						return {
							text: '退款失败',
								color: '#EC4645',
								bg: ''
						}
						break;
				}
			},
			getList(e) {
				orderList.findOrderDetails({
					orderId: e
				}).then(res => {
					if (res.code !== 20000) return
					this.details = res.data;
					tool.numberSetting(this.details, ['realAmount', 'volume', 'realPrice', 'marketPrice',
						'sitePrice'
					], 2);
				})
			},
			qrR() {
				console.log('1')
			},
			closeFn() {
				console.log('点击取消')
			},
			confirmFn() {
				console.log('点击确定')
			},
			share() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneTimeline",
					type: 1,
					summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			copy(text) {
				uni.setClipboardData({
					data: `${text}`,
					// data: `订单ID:${this.details.id}\n订单流水号:${this.details.orderSerialNumber}\n订单金额:${this.details.realAmount}元\n订单升数:${this.details.volume}升\n订单类型:${this.details.payAccountType==0?'个人':'企业'}\n司机姓名:${this.details.customerName}\n司机id:${this.details.customerId} ${this.details.companyName?'\n订单所属公司:' + this.details.companyName :''}\n手机号码:${this.details.customerPhone}`, //要被复制的内容
					// ${(this.details.payAccountType==0?'司机姓名':'订单所属公司') + ':' + (this.details.payAccountType==0? this.details.customerName:this.details.companyName)}
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						})
					}
				});
			},
		}
	}
</script>

<style>
	.copyButten {
		flex: 1;
		height: 76rpx;
		background: #2866FF;
		border-radius: 10rpx;
		margin-right: 19rpx;
	}

	.forwardButten {
		flex: 1;
		height: 76rpx;
		background: #28C445;
		border-radius: 10rpx;
		color: #FFFFFF;
		font-size: 32rpx;
	}

	.footerButten {
		padding: 0 43rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		margin: 43rpx 0;
	}

	.dxx {
		transition: all .3s;
		overflow: hidden;
	}

	.refund {
		height: 76rpx;
		width: 308rpx;
		background: #EC4645;
		border-radius: 10rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		margin: 0 auto;
	}

	.more {
		padding: 0 43rpx;
	}

	.moreButten {
		height: 67rpx;
		background: #F0F0F0;
		margin: 0 43rpx;
		border-radius: 10rpx;
	}

	.writeOff {
		height: 92rpx;
		background: #2866FF;
		border-radius: 10rpx;
		font-size: 32rpx;
		margin: 37rpx 43rpx;
		color: #FFFFFF;
		font-weight: 500;
	}

	.bgtext {
		font-size: 38rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #EC4645;
	}

	.actualUnitPrice {
		width: 160rpx;
		height: 108rpx;
		background: #F4F4F4;
		margin-left: 19rpx;
		text-align: center;
	}

	.olitype {
		width: 67rpx;
		height: 108rpx;
		background: #F4F4F4;
	}

	.price {
		padding-left: 80rpx;
	}

	.Line {
		position: relative;
		width: calc(100% - 100rpx);
		height: 100%;
		display: flex;
		align-items: center;
	}

	.splitLineyuan {
		width: 45rpx;
		height: 45rpx;
		border-radius: 50%;
		background-color: #F0F2FF;
	}

	.splitLine {
		height: 45rpx;
		display: flex;
		justify-content: space-between;
		position: relative;
		margin: 20rpx 0;
	}

	.Text {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.smallText {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #BBBBBB;
	}

	.paymentInformation {
		padding-top: 140rpx;
		padding-left: 35rpx;
		padding-right: 35rpx;
	}

	.details_body_car_lable .payment {
		width: 160rpx;
		height: 48rpx;
		background: #D1FFDA;
		color: #17A00E;
		font-size: 30rpx;
		position: absolute;
		right: 46rpx;
	}

	.justifyContent {
		justify-content: center;
	}

	.alignItems {
		align-items: center;
	}

	.felx {
		display: flex;
	}

	.details_body_car_lable .payLi {
		width: 100rpx;
		height: 44rpx;
		background: #2866FF;
		border-radius: 0px 0px 12rpx 12rpx;
		color: #FFFFFF;
		margin-left: 51rpx;

	}

	.details_body_car_lable .sign {
		width: 140rpx;
		height: 140rpx;
		background: #FFFFFF;
		box-shadow: 0px 5px 5px 0px rgba(88, 88, 88, 0.18);
		border-radius: 50%;
		top: -50rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.details_body_car_lable {
		width: 100%;
		position: absolute;
		top: 0;
		display: flex;
		padding: 0 46rpx;
	}

	.details_body_car {
		width: 100%;
		/* height: 1003rpx; */
		background-color: #FFFFFF;
		border-radius: 20rpx;
		position: relative;
		/* box-shadow: 0px 5px 5px 0px rgba(88, 88, 88, 0.18); */
		padding-bottom: 63rpx;

	}

	.details_body {
		padding: 0 31rpx;
		padding-top: 65rpx;
		width: 100vw;
		height: 100vh;
		overflow: auto;
	}
</style>