ec.uniapp-master/pages/business/payment/money.vue

<template>
	<view>
		<lf-nav title="输入金额" :showIcon="true" bgColor="#fff"></lf-nav>
		<view class="centent">
			<view class="card">
				<view class="lf-font-28 lf-color-222">输入金额</view>
				<view class="list money-list">
					<view class="lf-flex">
						<view class="symbol">￥</view>
						<input class="input" type="number" v-model="money" />
					</view>
					<view class="clear" v-if="money.length" @click="money = ''">
						<text class="lf-iconfont icon-cuo1"></text>
					</view>
				</view>
			</view>
			<button class="confirm" hover-class="lf-opacity" @click="confirm">确认</button>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				money: '',
				user_id: 0
			}
		},
		onLoad(options){
			if(options.user_id){
				this.user_id = options.user_id;
			}else{
				this.$msg('二维码错误', {icon: 'error'}).then(() => {
					this.$toBack();
				})
			}
		},
		methods: {
			confirm(){
				if(!this.money) return this.$msg('请输入金额');
				if(!this.$check(this.money, 'money')) return this.$msg('请输入正确的金额');
				let token = this.$cookieStorage.get('store_token');
				this.$http.post({
					api: 'api/supplier/offline/order',
					data: {
						user_id: this.user_id,
						amount: this.money
					},
					header: {
						token: token
					}
				}).then(res => {
					if(res.data.code == 200){
						this.$url('/pages/business/payment/wait', {type: 'redirect'})
					}else{
						let msg = res.data.msg || '网络错误';
						this.$msg(msg);
					}
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #F8F8F8;
	}
</style>
<style lang="scss" scoped="scoped">
	.centent{
		padding: 30rpx 32rpx;
		.card{
			padding: 30rpx;
			box-sizing: border-box;
			width: 686rpx;
			height: max-content;
			background: #FFFFFF;
			border-radius: 20rpx;
			.list{
				height: 90rpx;
				width: 100%;
				border-bottom: 1rpx solid #e5e5e5;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 10rpx;
				.input{
					width: 540rpx;
					height: 80rpx;
					font-size: 28rpx;
				}
				.input-code{
					width: 430rpx;
				}
				.clear{
					padding: 20rpx;
				}
				.code{
					min-width: 180rpx;
					max-width: 220rpx;
					height: 64rpx;
					padding: 0 4rpx;
					font-size: 24rpx;
					color: #15716E;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 32rpx;
					border: 2rpx solid #15716E;
				}
				.active-bg{
					background: #efefef;
				}
				.symbol{
					width: 30rpx;
					height: 90rpx;
					font-size: 36rpx;
					color: #222222;
					display: flex;
					align-items: flex-end;
				}
			}
			.money-list{
				height: 140rpx;
				.input{
					width: 500rpx;
					height: 130rpx;
					font-size: 72rpx;
					font-weight: bold;
					margin-left: 20rpx;
				}
			}
		}
		.confirm{
			width: 550rpx;
			height: 100rpx;
			background: #0D2E9A;
			border-radius: 50rpx;
			color: #FFFFFF;
			line-height: 100rpx;
			margin-top: 60rpx;
			font-size: 32rpx;
		}
	}
</style>