yzf/pages/index/orderDetail.vue

<template>
	<view class="container">
		<view class="recharge">
			<view class="example-title flex_item">
				<view class="titleTip"></view>
				<view class="">支付信息</view>
			</view>
			<view class="infoBox">
				<view class="tplAddr" v-if="baseData.bank=='wx'">收款:<text>微信</text></view>
				<view class="tplAddr" v-else-if="baseData.bank=='alipay'">收款:<text>支付宝</text></view>
				<view class="tplAddr" v-else>银行:<text>{{baseData.bank}}</text></view>
				<view class="tplAddr" v-if="baseData.bank_name">支行:<text>{{baseData.bank_name}}</text></view>
				<view class="tplAddr" v-if="baseData.bank_code">卡号:<text>{{baseData.bank_code}}</text></view>
				<view class="tplAddr" v-if="baseData.account">账号:<text>{{baseData.account}}</text></view>
				<view class="tplAddr">姓名:<text>{{baseData.real_name}}</text></view>
				<view class="tplAddr">手机号:<text>{{baseData.phone}}</text></view>
				<view class="tplAddr">数量:<text>{{baseData.num*1}}{{baseData.money_type}}</text></view>
				<view class="tplAddr">单格:<text>￥{{baseData.price*1}}</text></view>
				<view class="tplAddr">总价:<text>￥{{allmoney}}</text></view>
			</view>
		</view>
		<view class="login_text"  v-if="baseData.qrcode">
			<view class="example-title flex_item">
				<view class="titleTip"></view>
				<view class="">收款码</view>
			</view>
			<view class="login_input">
				<view class="login_name">
					<image class="showQrcode" mode="scaleToFill" :src="baseData.qrcode" @click="openshow"></image>
				</view>
			</view>
		</view>
		<view class="login_text" v-if="baseData.status!=1">
			<view class="example-title flex_item">
				<view class="titleTip"></view>
				<view class="">打款凭证</view>
			</view>
			<view class="login_input">
				<!-- <view class="login_img"><text>打款凭证</text></view> -->
				<view class="login_name" @click="scImg" v-if="!baseData.voucher">
					<image :src="img||'/static/image/img19.png'"></image>
				</view>
				<view class="login_name" v-else>
					<image class="showImage" mode="widthFix" :src="baseData.voucher"></image>
				</view>
			</view>
		</view>
		<!-- <view class="submission" v-if="baseData.status==3 && tab == 1"><button class="golden" type="golden" hover-class="none"
				@click="submission">确认提交</button></view> -->
		<view class="submission" v-if="baseData.status==5 && tab == 0"><button class="golden" type="golden" hover-class="none"
				@click="comirOrder">确认订单</button></view>
		<view class="submission" v-if="baseData.status==1 && tab == 0"><button class="golden" type="golden" hover-class="none"
				@click="cancel">取消订单</button></view>
	</view>
</template>
<script type="text/javascript">
	// import { show_cb,do_cb } from '@/api/recharge.js';
	import {
		upload
	} from '@/api/order.js';
	import {
		getSell,
		setSellVoucher,
		cancelLog,
		comfirLog
	} from '@/api/game.js';
	import {
		copyText
	} from '@/utils/rocessor.js';
	export default {
		data() {
			return {
				img: '',
				remark: '',
				id: '',
				baseData: {},
				allmoney: 0,
				tab:0
			};
		},
		onLoad(opt) {
			this.id = opt.id;
			this.tab = opt.tab;
			this.getData();
		},
		methods: {
			// 预览图片
			openshow(){
				console.log('预览');
				uni.previewImage({
					urls:[this.baseData.qrcode],
					fail(err){
						console.log(err);
					}
				})
			},
			//获取数据
			getData() {
				const that = this;
				//确认充值调接口，成功跳转页面
				getSell({
						id: that.id,
					})
					.then(function(e) {
						that.baseData = e.data.info
						that.baseData.num = that.baseData.num * 1;
						that.baseData.price = that.baseData.price * 1;
						that.allmoney = +(that.baseData.num * that.baseData.price).toFixed(8);
						console.log(that.allmoney);
					})
					.catch(function(e) {
						console.log(e);
					});
			},
			//取消挂出
			cancel(id){
				const that = this;
				cancelLog({
					id:that.id,
				}).then(res => {
					if(res.status == 200){
						uni.showToast({
							title: res.msg,
							icon: 'none',
						})
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
						})
					}
				});
			},
			comirOrder(){
				const that = this;
				comfirLog({
					id:that.id,
				}).then(res => {
					if(res.status == 200){
						uni.showToast({
							title: res.msg,
							icon: 'none',
						})
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
						})
					}
				});
			},
			// 下载图片
			domImage() {
				uni.downloadFile({
					url: this.er_code,
					success(re) {
						console.log(re.tempFilePath, 're');
						uni.showToast({
							title: '下载成功'
						});
					}
				})
			},
			// 复制地址
			copy() {
				copyText(this.dataMoney.address)
			},
			// 二维码生成
			qrR(res) {
				this.er_code = res;
			},
			//确认提交
			submission() {
				let obj = this;
				uni.showLoading({
					title: '提交中...',
					mask: true
				});
				//确认充值调接口，成功跳转页面
				setSellVoucher({
						id: obj.id,
						image: obj.img,
					})
					.then(function(e) {
						uni.hideLoading();
						uni.showToast({
							title: e.msg
						});
						setTimeout(()=>{
							uni.navigateBack()
						},1500)
					})
					.catch(function(e) {
						console.log(e, '错误');
						uni.hideLoading();
					});
			},
			//上传图片
			scImg() {
				upload({
					file: ''
				}).then((e) => {
					console.log(e, 55)
					this.img = e[0].url;
				});
			},
		}
	};
</script>

<style lang="scss">
	/* page {
	min-height: 100%;
	background: linear-gradient(-28deg, rgba(44, 45, 53, 1), rgba(59, 62, 74, 1));
} */
	.body_content {
		width: 100%;
		height: 100%;
	}

	.login_text {
		width: 100%;
		color: #fff !important;
		font-size: 28rpx !important;
		background-color: #1F2A4A;
		margin: 25rpx 0rpx;
		padding-bottom: 15rpx;
	}

	.recharge {
		text-align: center;
		color: #85858e;
		font-size: 30rpx;
		background-color: #1F2A4A;
	}

	.example-title {
		text-align: left !important;
		padding: 25rpx 25rpx;
		border-bottom: 2rpx solid #2F364E;
		color: #0C5AFA;

		.titleTip {
			width: 5rpx;
			height: 30rpx;
			background: linear-gradient(90deg, #0C5AFA, #1356FF);
			border-radius: 3rpx;
			margin-right: 15rpx;
		}
	}

	.infoBox {
		text-align: left;
		padding: 28rpx 51rpx;

		.tplName {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 24rpx;
		}

		.tplNum {
			margin: 30rpx 0rpx;
			padding: 15rpx 30rpx;
			border-radius: 10rpx;
			border: 1px solid #1356FF;
			font-family: PingFang SC;
			font-size: 26rpx;
			color: #1356FF;
			display: inline-block;
		}

		.tplAddr {
			color: #e3e3e3;
			font-size: 26rpx;
			margin-bottom: 10rpx;

			text {
				padding-left: 15rpx;
				font-size: 26rpx;
				color: #FFFFFF;
			}
		}
	}

	.login_input {
		// border-bottom: 1px solid #464755;
		padding: 35rpx;
	}

	.uni-input {
		width: 100%;
		text-align: left !important;
	}

	.code {
		width: 277rpx;
		height: 277rpx;
		margin: 25rpx auto;
		margin-bottom: 35rpx;
		background: #0C5AFA;
	}

	.code image {
		width: 100%;
		height: 100%;
	}

	.btnBox {
		justify-content: center;
		padding-bottom: 50rpx;
		padding-top: 30rpx;

		.btn {
			margin-right: 50rpx;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 26rpx;
			color: #0C5AFA;
			border: 1rpx solid #0C5AFA;
			padding: 15rpx 45rpx;
			border-radius: 15rpx;
		}
	}

	.submission {
		padding: 30rpx 25rpx;

		.golden {
			background: #0C5AFA;
			color: #fff;
		}
	}

	.login_name {
		width: 100%;
		color: #ffffff;

		.showImage {
			width: 100%;
			border: 1px solid #FFF;
		}
	}

	.login_name image {
		width: 100rpx;
		height: 100rpx;
	}

	.tip {
		padding: 29rpx 31rpx;
		line-height: 55rpx;
		font-size: 24rpx;
	}

	.select_img {
		width: 28rpx;
		height: 32rpx;
	}

	.select_img image {
		width: 100%;
		height: 100%;
	}

	.scann {
		margin-bottom: 35rpx;
		margin-top: 15rpx;
	}

	.scanning {
		background-color: #6f6f78;
		color: #ffffff;
		padding: 10rpx 30rpx;
		border-radius: 15rpx;
		font-size: 28rpx;
	}

	.address_code {
		padding: 25rpx 0rpx;
		color: #ffffff;
	}

	.input-placeholder {
		color: #fff !important;
	}
</style>