newyqg/pages/hall/hallpay.vue

<template>
	<view class="center">
		<view class="top">
			<view class="top-main">
				<view class="num">
					￥
					<text>{{ info.price }}</text>
				</view>
				<!-- <image class="top-image" src="../../static/img/copy.png" mode=""></image> -->
			</view>
			<view class="downtime">
				<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 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.user_id }}
				</view>
				<view class="title buyName">
					<text>卖家昵称：</text>
					{{ info.nickname }}
				</view>
				<!-- <view class="title buyPhone">
					<text>卖家手机号：</text>
					123456897
				</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" :current="tabCurrentIndex" :duration="500" @change="changeTab" :style="{ height: tabCurrentIndex == 2 ? '450rpx' : '280rpx' }">
				<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=""></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=""></image>
					</view>
				</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=""></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=""></image>
					</view>
					<!-- <view class="tc-item flex">
						<view class="tcitem-name">开户行</view>
						<view class="ali-name">椒江支行</view>
						<image 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=""></image>
					</view>
				</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=""></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=""></image>
					</view>
					<view class="tc-item">
						<view class="upload-title" style="color: #9d9d9d;">微信二维码</view>
						<view class="upload-main"><image class="upload-image" :src="wx.image" mode=""></image></view>
					</view>
				</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-else></image>
				<view class="upload-font">点击上传支付截图</view>
			</view>
		</view>
		<view class="contentBottomHeight"></view>
		<view class="bottom flex">
			<view class="bottom-item">
				<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">
				<image class="bi-image" src="../../static/img/kf.png" mode=""></image>
				<view class="bottom-font">联系客服</view>
			</view>
			<view class="btn" @click="buy()">立即购买</view>
		</view>
	</view>
</template>

<script>
import uniCountdowns from '@/components/uni-countdown/uni-countdowns.vue';
import { user_auction_order,upload,up_image } from '@/api/order.js';
import { timeComputed } from '@/utils/rocessor.js';
export default {
	components: {
		uniCountdowns
	},
	data() {
		return {
			// 倒计时
			stopTime: {
				stopTimeH: 0,
				stopTimeM: 0,
				stopTimeS: 0
			},
			tabCurrentIndex: 0,
			id: '',
			info: '',
			bank: '',
			wx: '',
			zfb: '',
			image:'',
		};
	},
	onLoad(option) {
		this.id = option.ordid;
		this.loadData();
	},
	methods: {
		uploads(){
			upload({
				filename: ''
			}).then(data => {
				this.image = data[0].url;
			})
		},
		loadData() {
			user_auction_order({ type: 1, order_id: this.id }).then(({ data }) => {
				let now_time = timeComputed(data.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;
			});
		},
		open() {
			this.$refs.popup.open();
		},
		close() {
			this.$refs.popup.close();
		},
		nav(url) {
			uni.navigateTo({
				url
			});
		},
		//swiper 切换
		changeTab(e) {
			this.tabCurrentIndex = e.target.current;
		},
		toBack() {
			uni.navigateBack({});
		},
		change(num) {
			this.tabCurrentIndex = num * 1;
		},
		buy() {
			up_image({id:this.info.id,image: this.image}).then(({data}) => {
				this.$api.msg(支付成功)
			})
		}
	}
};
</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;
}
</style>