newyqg/pages/hall/hallpay.vue

<template>
	<view class="center">
		<view class="top">
			<view class="top-main">
				<view class="num" style="color: #888888;">挂售价格￥{{ info.price }}</view>

				<!-- <image class="top-image" src="../../static/img/copy.png" mode=""></image> -->
			</view>
			<view class="top-main" style="margin-top: 30rpx;">
				<view class="num">
					<text>实际支付￥ {{ info.actual_price }}</text>
				</view>

				<!-- <image class="top-image" src="../../static/img/copy.png" mode=""></image> -->
			</view>

			<view v-if="status == 1">
				<view class="downtime"
					v-if="stopTime.stopTimeH < 0 || stopTime.stopTimeM < 0 || stopTime.stopTimeS < 0">订单已过期</view>
				<view class="downtime" v-else>
					<uni-countdowns color="#FFFFFF" splitor-color="#FD3B39" background-color="#FD3B39"
						border-color="#FD3B39" :show-day="false" :hour="stopTime.stopTimeH" :minute="stopTime.stopTimeM"
						:second="stopTime.stopTimeS"></uni-countdowns>
				</view>
			</view>
		</view>
		<view class="product flex">
			<image class="product-image" :src="info.image" mode=""></image>
			<view class="product-info">
				<view class="title">{{ info.name }}</view>
				<view class="title buyId">
					<text>卖家ID：</text>
					{{ info.collection_id }}
				</view>
				<view class="title buyName">
					<text>卖家昵称：</text>
					{{ info.c_nickname }}
				</view>
				<view class="title buyPhone">
					<text>卖家手机号：</text>
					{{ zfb != '' ? zfb.phone : wx != '' ? wx.phone : bank.phone }}
				</view>
			</view>
		</view>
		<view class="main">
			<view class="main-tip">请向以下账号自行转账（任选一种方式）</view>
			<view class="main-title flex">
				<view class="main-item">
					<view class="mt-item" @click="change('0')" :class="{ current: tabCurrentIndex === 0 }"
						v-if="zfb != ''">
						<image class="mt-image"
							:src="tabCurrentIndex == 0 ? '../../static/img/aliD.png' : '../../static/img/ali.png'"
							mode=""></image>
						<view class="mt-font" :class="{ current: tabCurrentIndex === 0 }">支付宝</view>
					</view>
				</view>
				<view class="main-item">
					<view class="mt-item" @click="change('1')" :class="{ current: tabCurrentIndex === 1 }"
						v-if="bank != ''">
						<image class="mt-image1"
							:src="tabCurrentIndex == 1 ? '../../static/img/bankD.png' : '../../static/img/bank.png'"
							mode=""></image>
						<view class="mt-font" :class="{ current: tabCurrentIndex === 1 }">银行卡</view>
					</view>
				</view>
				<view class="main-item">
					<view class="mt-item" @click="change('2')" :class="{ current: tabCurrentIndex === 2 }"
						v-if="wx != ''">
						<image class="mt-image2"
							:src="tabCurrentIndex == 2 ? '../../static/img/yueD.png' : '../../static/img/yue.png'"
							mode=""></image>
						<view class="mt-font" :class="{ current: tabCurrentIndex === 2 }">微信</view>
					</view>
				</view>
			</view>
			<swiper class="swiper-box" :duration="500" @change="changeTab"
				:style="{ height: tabCurrentIndex == 2 ? '450rpx' : tabCurrentIndex == 1 ? '340rpx' : '450rpx' }"
				:current="tabCurrentIndex" disable-touch>
				<swiper-item class="tab-content" v-if="zfb != ''">
					<scroll-view scroll-y="true" style="height: 100%;">
						<view class="tc-item flex">
							<view class="tcitem-name">账号</view>
							<view class="ali-name">{{ zfb.payment }}</view>
							<image class="tcitem-image" src="../../static/img/copy.png" mode=""
								@click="copy(zfb.payment)"></image>
						</view>
						<view class="tc-item flex">
							<view class="tcitem-name">姓名</view>
							<view class="ali-name">{{ zfb.name }}</view>
							<image class="tcitem-image" src="../../static/img/copy.png" mode="" @click="copy(zfb.name)">
							</image>
						</view>
						<view class="tc-item">
							<view class="upload-title" style="color: #9d9d9d;">支付宝二维码</view>
							<view class="upload-main" @click="lookimg(zfb.image)">
								<image class="upload-image" :src="zfb.image" mode="aspectFit"></image>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="tab-content" v-else></swiper-item>
				<swiper-item class="tab-content" v-if="bank != ''">
					<scroll-view scroll-y="true" style="height: 100%;">
						<view class="tc-item flex">
							<view class="tcitem-name">姓名</view>
							<view class="ali-name">{{ bank.name }}</view>
							<image class="tcitem-image" src="../../static/img/copy.png" mode=""
								@click="copy(bank.name)"></image>
						</view>
						<view class="tc-item flex">
							<view class="tcitem-name">银行</view>
							<view class="ali-name">{{ bank.bank }}</view>
							<image class="tcitem-image" src="../../static/img/copy.png" mode=""
								@click="copy(bank.bank)"></image>
						</view>
						<view class="tc-item flex">
							<view class="tcitem-name">支行</view>
							<view class="ali-name">{{ bank.bank_name }}</view>
							<image @click="copy(bank.bank_name)" class="tcitem-image" src="../../static/img/copy.png"
								mode=""></image>
						</view>
						<view class="tc-item flex">
							<view class="tcitem-name">账号</view>
							<view class="ali-name">{{ bank.payment }}</view>
							<image class="tcitem-image" src="../../static/img/copy.png" mode=""
								@click="copy(bank.payment)"></image>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="tab-content" v-else></swiper-item>
				<swiper-item class="tab-content" v-if="wx != ''">
					<scroll-view scroll-y="true" style="height: 100%;">
						<view class="tc-item flex">
							<view class="tcitem-name">账号</view>
							<view class="ali-name">{{ wx.payment }}</view>
							<image class="tcitem-image" src="../../static/img/copy.png" mode=""
								@click="copy(wx.payment)"></image>
						</view>
						<view class="tc-item flex">
							<view class="tcitem-name">姓名</view>
							<view class="ali-name">{{ wx.name }}</view>
							<image class="tcitem-image" src="../../static/img/copy.png" mode="" @click="copy(wx.name)">
							</image>
						</view>
						<view class="tc-item">
							<view class="upload-title" style="color: #9d9d9d;">微信二维码</view>
							<view class="upload-main" @click="lookimg(wx.image)">
								<image class="upload-image" :src="wx.image" mode="aspectFit"></image>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="tab-content" v-else></swiper-item>
			</swiper>
		</view>
		<view class="upload">
			<view class="upload-title">上传支付截图</view>
			<view class="upload-main">
				<image class="upload-image" src="../../static/img/add.png" mode="" v-if="!image" @click="uploads">
				</image>
				<image class="upload-image" :src="image" mode="" @click="uploads" v-if="image"></image>
				<view class="upload-font">点击上传支付截图</view>
			</view>
		</view>
		<view class="contentBottomHeight"></view>
		<view class="bottom flex">
			<view class="bottom-item" @click.stop="tocall()">
				<image class="bi-image" src="../../static/img/call.png" mode=""></image>
				<view class="bottom-font">联系卖家</view>
			</view>
			<view class="shu"></view>
			<view class="bottom-item" @click.stop="openKf()">
				<image class="bi-image" src="../../static/img/kf.png" mode=""></image>
				<view class="bottom-font">联系客服</view>
			</view>
			<view class="btn" @click.stop="buy()">完成上传</view>
		</view>
		<uni-popup ref="popupkf" type="center">
			<view class="popup-box">
				<view class="img">
					<image src="../../static/img/img009.png" mode=""></image>
				</view>
				<view class="mian">
					<view class="delivery">
						<view class="title">已经为您定制专属客服</view>
						<image src="../../static/img/img010.png" mode=""></image>
					</view>
					<view class="nocancel">客服VX:{{ text }}</view>
					<view class="comfirm-box">
						<view class="cancel" @click="cancel">取消</view>
						<view class="comfirm" @click="copy(text)">复制微信</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<canvas canvas-id="canvas" v-if="canvasStatus"
			:style="{width: canvasWidth + 'px', height: canvasHeight + 'px',position: 'absolute',left:'-100000px',top:'-100000px'}"></canvas>
		<uni-popup ref="popup" type="center">
			<view class="alertprogress">
				{{progress}}%
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniCountdowns from '@/components/uni-countdown/uni-countdowns.vue';
	import uniCopy from '@/components/js_sdk/xb-copy/uni-copy.js';
	import {
		user_auction_order,
		upload,
		up_image,
		edit_voucher,
		time
	} from '@/api/order.js';
	import {
		timeComputed
	} from '@/utils/rocessor.js';
	// import { json } from 'node:stream/consumers';
	export default {
		components: {
			uniCountdowns
		},
		data() {
			return {
				type: 1,
				// 倒计时
				stopTime: {
					stopTimeH: 0,
					stopTimeM: 0,
					stopTimeS: 0
				},
				tabCurrentIndex: 0,
				id: '',
				info: '',
				bank: '',
				wx: '',
				zfb: '',
				image: '',
				status: 1,
				text: '123456',
				payTime: '',
				upFileLoding: false,
				canvasStatus: false,
				canvasWidth: 0,
				canvasHeight: 0,
				progress: 0,
			};
		},
		onLoad(option) {
			this.id = option.ordid;
			this.getpayTime();
			if (option.type) {
				this.type = option.type;
			}
		},
		methods: {
			uploads() {
				const that = this;
				if (that.upFileLoding) {
					return
				}
				that.upFileLoding = true;
				setTimeout(() => {
					that.upFileLoding = false;
				}, 1000);
				that.canvasStatus = true;
				upload({
					filename: ''
				}, (res) => {
					that.image = res[0].url;
					that.canvasStatus = false
				}, (res) => {
					that.canvasStatus = false
				}, (res) => {
					that.canvasWidth = res.w
					that.canvasHeight = res.h
				}, (res) => {
					// console.log(res,'res');
					if (res.progress == 100) {
						this.$refs.popup.close()
						uni.showToast({
							title: '上传成功'
						});
					} else if (res.progress == 0) {
						this.$refs.popup.open()
					}
					that.progress = res.progress;
					// console.log(res,'进度条');
				})
			},
			getpayTime() {
				time().then(({
					data
				}) => {
					this.payTime = data.tow_time * 1 * 60;
					this.loadData();
				});
			},
			loadData() {
				user_auction_order({
					type: 1,
					order_id: this.id
				}).then(({
					data
				}) => {
					let time = data.time * 1 > data.radd_time * 1 ? data.time : data.radd_time;
					let now_time = '';
					if (data.auction_gu.end_time_two) {
						 now_time = timeComputed(time + data.auction_gu.end_time_two * 1 * 60);
					} else {
						 now_time = timeComputed(time + this.payTime);
					}
					this.status = data.status;
					this.stopTime.stopTimeH = now_time.hours;
					this.stopTime.stopTimeM = now_time.minutes;
					this.stopTime.stopTimeS = now_time.seconds;
					this.info = data;
					this.zfb = data.zfb;
					this.wx = data.wx;
					this.bank = data.bank;
					console.log(data.zfb.length, '123456');
					if (data.zfb.length == []) {
						this.tabCurrentIndex = 1;
						if (data.bank.length == []) {
							this.tabCurrentIndex = 2;
						}
					}
					console.log(this.tabCurrentIndex);
				});
			},
			nav(url) {
				uni.navigateTo({
					url
				});
			},
			copy(value) {
				let obj = this;
				let content = value; //需要复制的内容
				console.log('复制的内容:', content);
				// content = typeof content === 'string' ? content : content.toString(); // 复制内容，必须字符串，数字需要转换为字符串
				const result = uniCopy(content);
				if (result === false) {
					uni.showToast({
						title: '不支持'
					});
				} else {
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					});
				}
			},
			tocall() {
				let num = this.zfb != '' ? this.zfb.phone : this.wx != '' ? this.wx.phone : this.bank.phone;
				console.log(num);
				uni.makePhoneCall({
					phoneNumber: num //仅为示例
				});
			},
			// 查看大图
			lookimg(src) {
				console.log(src);
				let arr = [src];
				uni.previewImage({
					current: src,
					urls: arr
				});
			},
			//swiper 切换
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
			},
			toBack() {
				uni.navigateBack({});
			},
			change(num) {
				this.tabCurrentIndex = num * 1;
			},
			// 打开客服
			openKf() {
				this.$refs.popupkf.open();
			},
			// 关闭客服
			cancel() {
				this.$refs.popupkf.close();
			},
			buy() {
				if (this.image == '') {
					return this.$api.msg('请上传支付凭证');
				}
				if (this.type == 1) {
					up_image({
						id: this.info.id,
						image: this.image
					}).then(({
						data
					}) => {
						uni.navigateTo({
							url: '/pages/money/success'
						});
					});
				}
				if (this.type == 2) {
					edit_voucher({
						order_id: this.id,
						image: this.image
					}).then(({
						data
					}) => {
						uni.navigateTo({
							url: '/pages/money/success'
						});
					});
				}
			}
		}
	};
</script>

<style lang="less">
	.center {
		background: #f8f6f6;
		min-height: 100%;
		height: auto;
	}

	.top {
		margin-top: 10rpx;
		background-color: #ffffff;
		padding: 56rpx 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.top-main {
			display: flex;
			justify-content: center;
			align-items: center;
			line-height: 1;

			.num {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #fd3b39;

				text {
					font-size: 50rpx;
				}
			}

			.top-image {
				margin-left: 10rpx;
				width: 26rpx;
				height: 28rpx;
			}
		}

		.downtime {
			margin-top: 20rpx;
		}
	}

	.product {
		margin-top: 20rpx;
		padding: 35rpx 35rpx 40rpx 35rpx;
		background-color: #ffffff;
		justify-content: flex-start;
		align-items: flex-start;

		.product-image {
			width: 210rpx;
			height: 210rpx;
			border-radius: 10rpx;
		}

		.product-info {
			margin-left: 26rpx;
			padding-top: 10rpx;
			line-height: 1;

			.title {
				line-height: 1;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;

				text {
					color: #999999;
				}
			}

			.buyId {
				margin-top: 30rpx;
			}

			.buyName {
				margin-top: 24rpx;
			}

			.buyPhone {
				margin-top: 24rpx;
			}
		}
	}

	.main {
		margin-top: 20rpx;
		padding: 30rpx 0 40rpx;
		background: #ffffff;

		.main-tip {
			padding: 0 30rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}

		.main-title {
			margin-top: 34rpx;
			justify-content: flex-start;

			.current {
				background: linear-gradient(143.2747deg, #ff6a00, #ee0979) !important;
				color: #ffffff !important;
			}

			.main-item {
				width: 33%;
			}

			.mt-item {
				margin: 0 auto;
				width: 160rpx;
				height: 60rpx;
				background: #f8f8f8;
				border-radius: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.mt-image {
					width: 32rpx;
					height: 32rpx;
				}

				.mt-image1 {
					width: 38rpx;
					height: 32rpx;
				}

				.mt-image2 {
					width: 36rpx;
					height: 32rpx;
				}

				.mt-font {
					margin-left: 10rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}
			}
		}

		.swiper-box {
			width: 100%;
			padding: 14rpx 30rpx 0;

			.tc-item {
				padding: 50rpx 2rpx 0;
				line-height: 1;

				.tcitem-name {
					width: 118rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}

				.ali-name {
					width: 380rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				.tcitem-image {
					width: 26rpx;
					height: 28rpx;
				}
			}
		}
	}

	.upload-image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
	}

	.upload-title {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.upload-main {
		padding-top: 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.upload-font {
			margin-top: 24rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
	}

	.upload {
		margin-top: 20rpx;
		padding: 34rpx 30rpx 40rpx 30rpx;
		background: #ffffff;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		background: #ffffff;
		width: 750rpx;
		height: 146rpx;
		justify-content: flex-start;

		.bottom-item {
			margin-left: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.bi-image {
				width: 38rpx;
				height: 34rpx;
			}

			.bottom-font {
				margin-top: 14rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.bottom-num {
				line-height: 1;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}
		}

		.shu {
			margin-left: 20rpx;
			width: 2px;
			height: 74rpx;
			background: #c0bfc0;
		}

		.btn {
			margin-left: 20rpx;
			width: 430rpx;
			height: 80rpx;
			background: #fd3b39;
			border-radius: 20rpx;
			text-align: center;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ffffff;
			line-height: 80rpx;
		}
	}

	// 文章页底部高度撑开
	.contentBottomHeight {
		height: 150rpx;
	}

	.popup-box {
		width: 522rpx;
		height: 605rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		position: relative;

		.img {
			position: relative;
			top: -56rpx;
			left: 0;
			width: 522rpx;
			height: 132rpx;
			display: flex;
			justify-content: center;

			image {
				border-radius: 20rpx 20rpx 0 0;
				width: 450rpx;
				height: 132rpx;
			}
		}

		.mian {
			margin-top: -44rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			// padding: 32rpx 32rpx;
			background-color: #ffffff;
			border-radius: 0 0 20rpx 20rpx;
			text-align: center;

			.delivery {
				font-size: 40rpx;
				color: #333333;
				display: flex;
				align-items: center;
				flex-direction: column;

				.title {}

				image {
					margin-top: 48rpx;
					width: 172rpx;
					height: 160rpx;
				}
			}

			.nocancel {
				font-size: 32rpx;
				color: #333333;
				margin-top: 14rpx;
			}

			.comfirm-box {
				margin-top: 52rpx;
				display: flex;
				// margin-bottom: 32rpx;

				// justify-content: space-around;
				.cancel {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 197rpx;
					height: 74rpx;
					border: 1px solid #dcc786;
					border-radius: 38rpx;

					font-size: 32rpx;
					color: #605128;
				}

				.comfirm {
					margin-left: 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 197rpx;
					height: 74rpx;
					background: linear-gradient(-90deg, #d1ba77 0%, #f7e8ad 100%);
					border-radius: 38px;
					font-size: 32rpx;
					color: #605128;
				}
			}
		}
	}
</style>