gas-station-ticket-uniapp-240822/pages/payment/payment.vue

<template>
	<view class="payment">
		<uni-nav-bar dark :fixed="true" background-color="#00aaff" :border="false" status-bar title="加油" />

		<view class="container">
			<uni-section title="油号" type="line" titleFontSize="34rpx"></uni-section>
			<view class="select-oil">
				<view class="oil-item">
					<view class="oil active-oil">
						<!-- <view class="unit">￥</view> -->
						<view class="number">#95</view>
					</view>
				</view>
			</view>

			<uni-section title="输入金额" type="line" titleFontSize="34rpx"></uni-section>
			<view class="money-input">
				<image src="../../static/payment/money.png" mode="widthFix"></image>
				<input v-model="form.money" @focus="focus" placeholder="请输入加油金额" type="number" />
			</view>

			<view v-if="form.money" class="tip">
				折后共计{{ form.money * 0.99 }}元
			</view>

			<view class="select-money">
				<view v-for="item in 3" class="money-item">
					<view @click="selectMoney(item * 100,item)" :class="{ 'active-money' : index == item }"
						class="money">
						<view class="unit">￥</view>
						<view class="number">{{ item * 100 }}</view>
					</view>
				</view>
			</view>
			<view class="sumit">提交订单</view>

		</view>

		<PrivacyAgreementPoup ref="showPrivacy"></PrivacyAgreementPoup>

		<uni-fab ref="fab" :content="content" :horizontal="horizontal" :vertical="vertical" :direction="direction"
			@trigger="clickMenu" />

	</view>
</template>

<script setup>
	import {
		onShow
	} from "@dcloudio/uni-app"
	import {
		reactive,
		ref
	} from "vue";
	import PrivacyAgreementPoup from "../../components/PrivacyAgreementPoup/PrivacyAgreementPoup.vue";
	import api from '@/utils/api.js'

	const form = reactive({
		money: ''
	})
	const index = ref(0)
	const showPrivacy = ref()
	const content = reactive([{
			iconPath: '/static/payment/wedding-celebration.png',
			text: '婚庆服务',
			active: false,
			path : '/pages/weddingCelebration/weddingCelebration'
		}
	])
	const horizontal = ref('right')
	const vertical = ref('bottom')
	const direction = ref('vertical')

	//生命周期
	onShow(() => {
		// if (wx.onNeedPrivacyAuthorization) {
		// 	console.log('onNeedPrivacyAuthorization');
		// 	wx.onNeedPrivacyAuthorization(resolve => {
		// 		console.log('onNeedPrivacyAuthorization');
		// 		this.resolvePrivacyAuthorization = resolve
		// 		showPrivacy.value.init(resolve)
		// 	})
		// }

		// uni.login({
		// 	success(res) {
		// 		console.log(res);
		// 		if (res.errMsg != "login:ok") {
		// 			return
		// 		}

		// 		api('wxLogin', {
		// 			code: res.code
		// 		}, res => {
		// 			if (res.code != 200) {
		// 				return
		// 			}

		// 			// state.userInfo = res.result.userInfo
		// 			// uni.setStorageSync('token', res.result.token)

		// 			if (state.userInfo) {

		// 			}
		// 		})
		// 	}
		// })

	})

	//用户选择加油金额
	function selectMoney(money, item) {
		form.money = money
		index.value = item
	}

	//输入框获得焦点
	function focus() {

	}
	
	//用户点击了悬浮按钮
	function clickMenu({ item }){
		uni.navigateTo({
			url: item.path
		})
	}
</script>

<style scoped>
	.payment {
		height: 100vh;
		background: #F1F5F8;
		width: 750rpx;
		margin: 0 auto;
	}

	.container {
		width: 96%;
		margin: 0rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		overflow: hidden;
		background: white;
		margin-top: 20rpx;
	}

	.money-input {
		display: flex;
		align-items: center;
		background: #F6F7FB;
		padding: 30rpx 10rpx;
		border-radius: 20rpx;
	}

	.tip {
		color: #00aaff;
		margin-top: 10rpx;
	}

	.money-input image {
		width: 45rpx;
	}

	.money-input input {
		font-size: 36rpx;
	}

	.select-oil,
	.select-money {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin: 30rpx 0rpx;
	}

	.select-oil {
		margin: 0;
	}

	.select-oil .oil-item,
	.select-money .money-item {
		width: 32.33%;
		background: #F1F5F8;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
	}

	.select-oil .oil,
	.select-money .money {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0rpx;
		box-sizing: border-box;
		color: #5D5C61;
	}

	.select-oil .active-oil,
	.select-money .active-money {
		background: #00aaff;
		color: white;
	}

	.select-money .unit {
		font-size: 26rpx;
	}

	.select-money .number {
		font-size: 34rpx;
	}


	.sumit {
		background: #33a5fc;
		color: white;
		font-size: 36rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80rpx;
		border-radius: 20rpx;
	}
</style>