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" :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'
	export default {
		onShareAppMessage(res) {
			return {
				title: '订单详情',
				path: '/orderList/orderDetails/orderDetails'
			}
		},
		components: {
			qrcode
		},
		data() {
			return {
				details:{},
				show:{
					img:false,
					footer:false
				},
				iShow: {
					seting: false
				},
				moreOpen: false,
				val:'898989898',
				id:null,
				butten: {
					colse: '取消',
					confirm: '确定',
					coloseBg: '',
					coloseColor: '',
					confirmBg: '',
					confirmColor: ''
				},
			}
		},
		onLoad(e) {
			if(e.jsData){
				console.log(JSON.parse(e.jsData));
				this.id  = JSON.parse(e.jsData).id
				this.getList(this.id)
			}
			
		},
		methods: {
			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: function (res) {
						if (res.confirm) {
							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>