oil-station/gasStation-uni/pages/refuel/refuel.vue

<template>
	<view class="content">
		<view class="container">
			<view class="my-header">
				<view class="my-text">一键加油</view>
			</view>
			<view class="top">
				<view class="top-box">
					<view class="dis">
						<view class="top-img">
							<image src="../../static/logo.png" mode=""></image>
						</view>
						<view class="">
							<view class="top-title">九州加油站（总站）</view>
							<view class="top-hui">平安大道东200米</view>
							<view class="top-hong">￥7.68/L</view>
						</view>
					</view>
					<view class="" @click="gorefuel">
						<view class="bulu">切换站点 <uni-icons type="right" color="#304fff" size="16"></uni-icons> </view>

					</view>
					<!-- <view class="bulu-icon">
						<view class=""></view>
						<view class="">比国标降 0.22 元 </view>
					</view> -->

				</view>
				<view class="fa-box">
					<view class="fa-title">选择油号 <text class="top-hui"> 请务必与员工确认类型</text> </view>
					<view class="wrap-box">
						<view class="box-oil" :class=" {'xz' :hindex == index }" @click="gethindex(index)"
							v-for="(item,index) in 4" :key="index">
							<text>92#</text>
						</view>
					</view>
				</view>
				<view class="fa-box">
					<view class="fa-title">选择油枪 <text class="top-hui"> 请务必与员工确认枪号</text> </view>
					<view class="wrap-box">
						<view class="box-oil" :class=" {'xz' :qindex == index }" @click="getqindex(index)"
							v-for="(item,index) in 8" :key="index">
							<text>{{index}}号枪</text>
						</view>
					</view>
				</view>
				<view class="fa-box">
					<view class="fa-title">请输入加油金额</view>
					<view class="inputkuang" @click="show = true">
						<view class="sbox">￥</view>
						<view class="sbox" style="text-align: center;font-weight: bold;">{{value}}</view>
						<view class="sbox-hui">约{{value}}L</view>
					</view>
				</view>
				<view class="anniu">
					<text>立即加油</text>
				</view>

			</view>
			<u-keyboard ref="uKeyboard" :tips="value" mode="number" @cancel="show = false" @confirm="show = false"
				@change="valChange" @backspace="backspace" v-model="pic" :show="show"></u-keyboard>
			<tabbar></tabbar>
		</view>
	</view>
</template>

<script>
	import tabbar from "../../components/tabbar/tabbar.vue"
	export default {
		data() {
			return {
				value: '',
				show: false,
				pic: 0,
				hindex: 0,
				qindex: 0
			}
		},
		components: {
			tabbar
		},
		methods: {
			gethindex(index) {
				this.hindex = index
			},
			getqindex(index) {
				this.qindex = index
			},
			gorefuel() {
				uni.navigateTo({
					url: '/pagesRefuel/pagesRefuel/index'
				})
			},
			valChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.value += val;
				console.log(this.value);
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.value.length) this.value = this.value.substr(0, this.value.length - 1);
				console.log(this.value);
			}
		}

	}
</script>

<style scoped lang="scss">
	.content {
		background: #ffffff;
	}

	.container {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		padding-top: 88px;
	}

	.my-header {
		width: 100%;
		height: 88px;
		background: #304fff;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;

		.my-text {
			margin-top: 40px
		}

		position: fixed;
		top: 0px;
	}

	.top {
		width: 100%;
		height: 200px;
		background-image: linear-gradient(180deg, #304fff, #ffffff);
		box-sizing: border-box;
		padding: 1px;

	}

	.top-box {
		width: 90%;
		height: 100px;
		background-color: #ffffff;
		border-radius: 8px;
		margin: 20px auto;
		box-sizing: border-box;
		padding: 10px;
		display: flex;
		justify-content: space-between;
		margin-top: 60px;
	}

	.top-title {
		font-size: 16px;
	}

	.top-img {
		width: 46px;
		height: 46px;
		background-color: #304fff;
		border-radius: 6px;
		overflow: hidden;
		margin-right: 10px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.top-hui {
		font-size: 14px;
		margin: 5px 0px;
		color: #999999;
	}

	.top-hong {
		font-size: 16px;
		font-weight: bold;
		color: #ff0000;
	}

	.dis {
		display: flex;

	}

	.bulu {
		color: #304fff;
	}

	.bulu-icon {
		width: 120px;
		height: 20px;
		font-size: 12px;
		color: #304fff;
		border: 1px solid #304fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wrap-box {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.box-oil {
		width: 23%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #666666;
		background: #f7f7f7;
		margin-right: 5px;
		margin-top: 5px;
		padding: 12px 0px;
		border-radius: 6px;
	}

	.fa-box {
		width: 90%;
		margin: 20px auto;
	}

	.fa-title {
		font-size: 18px;
		margin: 10px 0px;
	}

	.xz {
		color: #ffffff;
		background: #1678ff;
	}

	.anniu {
		width: 90%;
		margin: 10px auto;
		height: 40px;
		background: #1678ff;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
	}

	.inputkuang {
		width: 100%;
		height: 40px;
		border: 1px solid #304fff;
		border-radius: 6px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0px 10px;
	}

	.sbox {
		width: 33%;

	}

	.sbox-hui {
		width: 33%;
		text-align: right;
		color: #999999;
	}
</style>