wx_oms/oilAccount/page/accountRecharge/details.vue

<template>
	<view class="details_body">
		<view class="details_body_car">
			<view class="paymentInformation">
				<view class="paymentInformation_top">
					<view class="felx jw">
						<text style="font-size: 24rpx;"
							class="paymentInformation_item_label">{{details.id||'--'}}</text>
						<view :style="{background:typeBackground(details.auditMark),color:typeColor(details.auditMark)}"
							class="listCard_header_Type">
							<view :style="{background:typeColor(details.auditMark)}" class="garden"></view>
							<text>{{details.auditMark|typeText(details)}}</text>
						</view>
					</view>
					<view
						:style="{color: transactionType(details.transactionType).color,background:transactionType(details.transactionType).bg}"
						class="genres">{{ transactionType(details.transactionType).text}}</view>
					<!-- <view class="felx ac">
						<text class="companyTag_label">充值</text>
						<view v-if="details.createSource=='WECHAT_COMPANY'" class="companyTag">企业微信</view>
						<view v-if="details.operationCode!==null" style="background-color: #ff4949;" class="companyTag">
							紧急充值</view>
					</view> -->
				</view>
				<view class="paymentInformation_footer felx an jw">
					<view class="oilInformation  ">
						<view class="paymentInformation_item_value">{{details.siteChannelAccountName||'--'}}</view>
						<view class="companyTag_label">{{details.siteChannelAccountId||'--'}}</view>
					</view>
					<view class="price">{{details.transactionAmount||'---'}}</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 class="paymentInformation">
				<view class="paymentInformation_selector felx jc">
					<view class="selector_item">油站公司信息</view>
				</view>
				<view class="paymentInformation_container">
					<view class="paymentInformation_item">
						<view class="paymentInformation_item_value">{{details.sepCompanyName||'--'}}</view>
						<view class="paymentInformation_item_label">{{details.sepCompanyId||'--'}}</view>
					</view>
				</view>
			</view>
			<view @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="{maxHeight:moreOpen?'999rpx':'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" style="flex: 1; display: flex;flex-direction: column;overflow: hidden;">
					<view style="flex: 1;overflow: auto;" class="paymentInformation_container">
						<view class="paymentInformation_item">
							<view class="paymentInformation_item_value">
								{{details.createUserName||'--'}}({{details.createUser||'--'}})
							</view>
							<view class="paymentInformation_item_label">创建用户</view>
						</view>
						<view class="paymentInformation_item">
							<view class="paymentInformation_item_value">
								{{details.createTime||'--'}}
							</view>
							<view class="paymentInformation_item_label">创建时间</view>
						</view>
						<view class="paymentInformation_item">
							<view class="paymentInformation_item_value">
								{{details.updateUserName||'--'}}({{details.updateUser||'--'}})
							</view>
							<view class="paymentInformation_item_label">更新用户</view>
						</view>
						<view class="paymentInformation_item">
							<view class="paymentInformation_item_value">
								{{details.updateTime||'--'}}
							</view>
							<view class="paymentInformation_item_label">更新时间</view>
						</view>
						<view class="paymentInformation_item">
							<view class="paymentInformation_item_value">
								{{details.createSource||'--'}}/{{details.updateSource||'--'}}
							</view>
							<view class="paymentInformation_item_label">创建数据来源 / 更新数据来源</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footerButten felx">
			<view @click="goBack" class="backButten felx  justifyContent alignItems">返回</view>
			<button v-if="details.auditMark==0 || details.auditMark==5" @click="examineiPre"
				class="forwardButten felx justifyContent alignItems">审核</button>
		</view>
		<popup :butten='butten' @confirmFn='confirmFn' @closeFn='closeFn' :show="show" v-model="iShow.examine">
			<view slot="coment">
				<view class="popup_coment">
					立即进行审核
				</view>
			</view>
		</popup>
	</view>
</template>

<script>
	import oilAccount from '@/api/oilAccount'

	import tool from '@/utils/tool.js'
	export default {
		onShareAppMessage(res) {
			return {
				title: '订单详情',
				path: '/orderList/orderDetails/orderDetails'
			}
		},
		components: {},
		data() {
			return {
				user: uni.getStorageSync('user'),
				selector: 0,
				details: {},
				show: {
					img: false,
					footer: true
				},
				iShow: {
					examine: false,
					seting: false
				},
				moreOpen: false,
				val: '898989898',
				modifyShow: {

				},
				butten: {
					colse: '审核失败',
					confirm: '审核成功',
					coloseBg: '#EC4645',
					coloseColor: '#FFFFFF',
					confirmBg: '#17A00E',
					confirmColor: '#FFFFFF',
					borderRadius: '30rpx'
				},
			}
		},
		onLoad(e) {
			if (e.data) {
				this.details = JSON.parse(e.data);
				tool.numberSetting(this.details, ['transactionAmount'], 2)
			}
		},
		filters: {
			typeText: function(e,details) {
				switch (Number(e)) {
					case 0:
						return ['RECHARGE_REBETE', 'CONSUME_REBATE', 'CALIBRATION_BALANCE'].includes(details.transactionType) ? '待运营组长审核' : '等待审核'
					case 1:
						return '审核通过'
					case -1:
						return '审核失败'
					case 2:
						return '等待付款'
					case 3:
						return '付款完成'
					case 4:
						return '取消充值'
					case 5:
						return '待数据中心审核'
					default:
						return '---'
				}
			},

		},
		methods: {
			examineiPre() {
				let {
					auditMark,
					transactionType
				} = this.details
				let authList = uni.getStorageSync('user').authList
				if (auditMark == 0 && ['RECHARGE_REBETE', 'CONSUME_REBATE', 'CALIBRATION_BALANCE'].includes(
						transactionType) &&
					!authList.includes('finance:site:recharge:operateLeader')) {
					uni.showToast({
						title: '无运营组长审核权限！',
						icon: 'none'
					})
					return
				}
				if (this.details.auditMark == 5 && !authList.includes('finance:site:recharge:dataCenter')) {
					uni.showToast({
						title: '无数据中心审核权限！',
						icon: 'none'
					})
					return
				}
				this.iShow.examine = true
			},

			transactionType(e) {
				switch (e) {
					case 'RECHARGE':
						return {
							text: '充值',
								color: '#666666',
								bg: 'rgba(102, 102, 102, 0.1)'
						}
						case 'RECHARGE_REBETE':
							return {
								text: '充返',
									color: '#9F43CC',
									bg: 'rgba(159, 67, 204, 0.1)'
							}
							case 'CONSUME_REBATE':
								return {
									text: '消返',
										color: '#9F43CC',
										bg: 'rgba(159, 67, 204, 0.1)'
								}
								case 'DISPATCH':
									return {
										text: '调拨',
											color: '#2866FF',
											bg: 'rgba(40, 102, 255, 0.1)'
									}
									case 'CALLBACK':
										return {
											text: '回拨',
												color: '#FF6700',
												bg: 'rgba(255, 103, 0, 0.1)'
										}
										case 'TURN':
											return {
												text: '圈回',
													color: '#EC4545',
													bg: 'rgba(236, 69, 69, 0.1)'
											}
											default:
												return {
													text: '---',
														color: '#666666',
														bg: 'rgba(102, 102, 102, 0.1)'
												}
				}
			},
			goBack() {
				uni.navigateBack()
			},
			examine(auditMark, auditRemark = '') {
				let data = {
					auditMark: auditMark,
					auditRemark: auditRemark,
					id: this.details.id,
					updateSource: "OMS-MINIAPP"
				}
				oilAccount.auditAccount(data).then(res => {
					if (res.code == 20000) {
						uni.showToast({
							title: '操作成功',
							icon: 'success'
						});
						this.iShow.examine = false;
						this.getDetails()
					}
				})
			},
			carSegmentation(e, w) {
				if (!e) return '数据错误';
				let splitString = e.split('/')
				switch (w) {
					case 'companyName':
						return splitString[0]
					case 'bankName':
						return splitString[1].split('(')[0]
					case 'bankNumber':
						return splitString[1].split('(')[1].replace(')', ' ')
				}

			},
			typeColor: function(e) {
				switch (Number(e)) {
					case 0:
						return '#E8CD30'
					case 1:
						return '#17A00E'
					case -1:
						return '#EC4545'
					case 2:
						return '#ffffff'
					case 3:
						return '#ffffff'
					case 4:
						return '#ffffff'
					default:
						return ''
				}
			},
			typeBackground: function(e) {
				switch (Number(e)) {
					case 0:
						return '#E8CD3026'
					case 1:
						return '#17A00E26'
					case -1:
						return '#EC454526'
					case 2:
						return '#ffba00'
					case 3:
						return '#13ce66'
					case 4:
						return '#ff4949'
					default:
						return ''
				}
			},
			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() {
				console.log('-----------------')
			},
			getDetails(e) {
				oilAccount.detailsTheQuery(this.details.id).then(res => {
					if (res.code !== 20000) return
					this.details = res.data
					tool.numberSetting(this.details, ['transactionAmount'], 2)
				})
			},
			qrR() {
				console.log('1')
			},
			closeFn() {
				this.examine(-1)
				console.log('点击取消')
			},
			confirmFn() {
				this.examine(1)
				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>
	.garden {
		background-color: #E8CD30;
		border-radius: 50%;
		width: 20rpx;
		height: 20rpx;
		margin-right: 16rpx;
	}

	.showProof {
		margin-top: 20rpx;
		color: #2866FF;
		font-size: 28rpx;
	}

	.garden {
		background-color: #E8CD30;
		border-radius: 50%;
		width: 20rpx;
		height: 20rpx;
		margin-right: 16rpx;
	}

	.listCard_header_Type {
		background: rgba(232, 205, 48, 0.15);
		border-radius: 40rpx;
		color: #E8CD30;
		padding: 0 25rpx;
		font-size: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
/* 		Width:
			180rpx; */
		Height:
			54rpx;
	}

	.paymentInformation_item_value {
		color: #666666;
		font-size: 28rpx;
	}

	.companyTag_label {
		color: #BBBBBB;
		font-size: 28rpx;
	}

	.companyTag {
		font-size: 20rpx;
		padding: 5rpx 20rpx;
		background-color: #18BC37;
		color: #FFFFFF;
		border-radius: 20rpx;
		margin-left: 15rpx;
	}

	.ac {
		align-items: center;
	}

	.paymentInformation_item_label {
		color: #BBBBBB;
		font-size: 20rpx;
	}

	.popup_coment {
		padding: 80rpx;
		text-align: center;
		font-size: 35rpx;
		color: #666666;
	}

	.backButten {
		background: #ADCEFF;
		border-radius: 22rpx;
		width: 364rpx;
		color: #FFFFFF;
		font-size: 30rpx;
	}

	.paymentInformation_item:last-child {
		margin-bottom: 0;
	}

	.paymentInformation_item {
		margin-bottom: 20rpx;
	}

	.paymentInformation_container {
		padding-top: 40rpx;
	}

	.on_selector_item {
		font-size: 28rpx;
		color: #fFFFFF;
		width: 180rpx;
		height: 60rpx;
		background: #ADCEFF;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 20rpx;
	}

	.selector_item {
		font-size: 28rpx;
		color: #BBBBBB;
		width: 180rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 20rpx;
	}

	.paymentInformation_footer {
		margin-top: 40rpx;
	}

	.an {
		align-items: flex-end;
	}

	.jw {
		justify-content: space-between;
	}

	.jc {
		justify-content: center;
	}

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

	.forwardButten {
		width: 260rpx;
		height: 80rpx;
		background: #FF4A4A;
		border-radius: 22rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		margin: 0;
	}

	.footerButten {
		/* padding: 0 43rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		margin: 43rpx 0; */
		width: 100vw;
		position: fixed;
		height: 80rpx;
		left: 0;
		bottom: env(safe-area-inset-bottom);
		justify-content: space-around;
	}

	.dxx {
		transition: all 1s;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.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;
		margin-top: 40rpx;
	}

	.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;
	}

	.genres {
		width: 88rpx;
		height: 40rpx;
		font-size: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.price {
		/* padding-left: 80rpx; */
		font-size: 48rpx;
		font-weight: 600;
		color: #666666;
	}

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

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

	.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: 0 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; */
		padding: 35rpx 0;
		margin-bottom: calc(env(safe-area-inset-bottom) + 90rpx);

	}

	.details_body {
		padding: 0 31rpx;
		/* padding-bottom: 90rpx; */
		width: 100vw;
		height: 100vh;
		overflow: auto;
		background-color: #2866FF;
	}
</style>