newyqg/pages/hall/hallpay.vue

<template>
	<view class="center">
		<view class="top">
			<view class="top-main">
				<view class="num">
					￥
					<text>1299.00</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="../../static/img/evening.png" mode=""></image>
			<view class="product-info">
				<view class="title">趣豆商城挂售礼盒</view>
				<view class="title buyId">
					<text>卖家ID：</text>
					123456
				</view>
				<view class="title buyName">
					<text>卖家昵称：</text>
					李丹丹
				</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="mt-item" @click="change('0')" :class="{ current: tabCurrentIndex === 0 }">
					<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 class="mt-item" @click="change('1')" :class="{ current: tabCurrentIndex === 1 }">
					<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 class="mt-item" @click="change('2')" :class="{ current: tabCurrentIndex === 2 }">
					<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>
			<swiper class="swiper-box" :current="tabCurrentIndex" :duration="500" @change="changeTab" :style="{ height: tabCurrentIndex == 1 ? '450rpx' : '280rpx' }">
				<swiper-item class="tab-content">
					<view class="tc-item flex">
						<view class="tcitem-name">支付宝号</view>
						<view class="ali-name">152****4123</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>
						<image class="tcitem-image" src="../../static/img/copy.png" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item class="tab-content">
					<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">中国建设银行</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">5123456798231564894561894</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" style="color: #fd5452">请使用本人银行卡，否则无效</view>
						<image class="tcitem-image" src="" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item class="tab-content">
					<view class="tc-item flex">
						<view class="tcitem-name">账号</view>
						<view class="ali-name">152****4123</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>
						<image class="tcitem-image" src="../../static/img/copy.png" mode=""></image>
					</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=""></image>
				<view class="upload-font">点击上传支付截图</view>
			</view>
		</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="nav('/pages/hall/hallpay')">立即购买</view>
		</view>
	</view>
</template>

<script>
import uniCountdowns from '@/components/uni-countdown/uni-countdowns.vue';
export default {
	components: {
		uniCountdowns
	},
	data() {
		return {
			// 倒计时
			stopTime: {
				stopTimeH: 1,
				stopTimeM: 1,
				stopTimeS: 1
			},
			tabCurrentIndex: 0
		};
	},
	methods: {
		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;
		}
	}
};
</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 {
		padding: 0 30rpx;
		margin-top: 34rpx;
		.current {
			background: #4166fc !important;
			color: #ffffff !important;
		}
		.mt-item {
			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 {
	margin-top: 20rpx;
	padding: 34rpx 30rpx 40rpx 30rpx;
	background: #ffffff;
	.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-image {
			width: 160rpx;
			height: 160rpx;
			border-radius: 10rpx;
		}
		.upload-font {
			margin-top: 24rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
	}
}
.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: 40rpx;
		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;
	}
}
</style>