ec.uniapp-master/pages/aboutpay/confirmcash.vue

<template>
	<view>
		<lf-nav :spreadOut="true" :showIcon="true" bgColor="#fff" title="确认金额"></lf-nav>
		<view class="lf-p-30" style="margin: 0 auto;">
			<view class="confirm-card">
				<view class="lf-font-32 lf-color-555">
					请核对支付金额
				</view>
				<view style="font-size: 72rpx;color: #15716E;">¥{{ amount }}</view>
				<view class="lf-flex">
					<view class="lf-font-24 lf-m-r-10" style="color:#FF9D9D">
						剩余支付时间
					</view>
					<countdown-timer :time="time" :autoStart="true" @finish="dateFinish">
						<template v-slot="{minute, second}">
							<!-- <view>{{minute}}:{{second}}</view> -->
							<view class="lf-flex">
								<view class="lf-font-24" style="color:#FF9D9D">{{ minute >= 10 ? minute : "0" + minute }}</view>
								<view class="lf-font-24" style="color:#FF9D9D">:</view>
								<view class="lf-font-24" style="color:#FF9D9D">{{ second >= 10 ? second : "0" + second }}</view>
							</view>
						</template>
					</countdown-timer>
				</view>
				<view>
					<button class="confirmcash-btn" hover-class="lf-opacity" @click="confirm">确认</button>
				</view>
			</view>
		</view>
		<lf-pay-password v-if="show_pay" @comfirm="payComfirm" title="请输入支付密码"></lf-pay-password>
	</view>
</template>

<script>
	import countdownTimer from '@/components/countdown-timer/countdown-timer';
	import lfPayPassword from '@/components/lf-payPassword/lf-payPassword.vue'
	export default {
		components: {
			countdownTimer,
			lfPayPassword
		},
		data() {
			return {
				time: new Date('2021/09/8 14:15:00').getTime() - new Date('2021/09/8 14:10:00').getTime(),
				amount: 0,
				clerk_id: 0,
				brand_id: 0,
				is_date_end: false,
				show_pay: false,
				pay_pwd: '' // 支付密码
			}
		},
		onLoad(options){
			this.amount = options.amount || 0;
			this.clerk_id = options.clerk_id;
			this.brand_id = options.brand_id;
		},
		methods: {
			dateFinish(){
				console.log("倒计时结束");
				this.is_date_end = true;
			},
			// 确认
			confirm(){
				if(this.amount == 0){
					return this.$msg('支付金额不能为0');
				}
				if(this.is_date_end){
					uni.showModal({
						title: '温馨提示',
						content: '支付时间已结束, 请重新操作',
						showCancel: false,
						confirmColor: '#1c8482'
					});
					return;
				};
				this.show_pay = true;
			},
			// 密码输入完毕
			payComfirm(event){
				this.show_pay = false;
				this.pay_pwd = event;
				this.offlinePay();
			},
			offlinePay(){
				uni.showLoading({
					title: '正在支付中'
				})
				let token = this.$cookieStorage.get('user_token');
				this.$http.post({
					api: 'api/offline/pay',
					data: {
						clerk_id: this.clerk_id,
						brand_id: this.brand_id,
						amount: this.amount,
						pay_pwd: this.pay_pwd
					},
					header: {
						Authorization: token
					}
				}).then(res => {
					uni.hideLoading();
					if(res.data.code == 200){
						this.$url('/pages/aboutpay/paystate?payState=1&amount='+ this.amount, {type: 'redirect'});
					}else{
						this.$msg(res.data.message || res.data.data || '支付失败').then(() => {
							this.$url('/pages/aboutpay/paystate?payState=0', {type: 'redirect'});
						})
					}
				}).catch(err => uni.hideLoading())
			}
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
	}
</style>
<style scoped lang="scss">
	.confirmcash-btn {
		width: 550rpx;
		height: 100rpx;
		background: #15716E;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		font-size: 32rpx;
		color: white;
		align-items: center;
	}
	.confirm-card {
		padding: 30rpx 0;
		width: 686rpx;
		height: 475rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: column;
	}
</style>