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>
				<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' : '280rpx' }"
				:current="tabCurrentIndex"
				disable-touch
			>
				<swiper-item class="tab-content" v-if="zfb != ''">
					<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>
				</swiper-item>
				<swiper-item class="tab-content" v-else></swiper-item>
				<swiper-item class="tab-content" v-if="bank != ''">
					<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>
				</swiper-item>
				<swiper-item class="tab-content" v-else></swiper-item>
				<swiper-item class="tab-content" v-if="wx != ''">
					<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>
				</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>
	</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 } from '@/api/order.js';
import { timeComputed } from '@/utils/rocessor.js';
export default {
	components: {
		uniCountdowns
	},
	data() {
		return {
			type: 1,
			// 倒计时
			stopTime: {
				stopTimeH: 0,
				stopTimeM: 0,
				stopTimeS: 0
			},
			tabCurrentIndex: 0,
			id: '',
			info: '',
			bank: '',
			wx: '',
			zfb: '',
			image: '',
			text: '123456'
		};
	},
	onLoad(option) {
		this.id = option.ordid;
		this.loadData();
		if (option.type) {
			this.type = option.type;
		}
	},
	methods: {
		uploads() {
			upload({
				filename: ''
			}).then(data => {
				this.image = data[0].url;
				console.log(this.image);
			});
		},
		loadData() {
			user_auction_order({ type: 1, order_id: this.id }).then(({ data }) => {
				let now_time = timeComputed(data.time + 3600);
				console.log(now_time);
				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>