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">
			
			{{ scene }}
			
			<uni-section title="当前加油站" 
			type="line" 
			titleFontSize="34rpx"></uni-section>
			<view class="select-oil"
			style="justify-content: flex-start;">
				<view class="oil-item" v-if="gasStation.name">
					<view class="oil active-oil">
						{{ gasStation.name }}
					</view>
				</view>
				<view class="oil-item"
				style="margin-left: 20rpx;">
					<view class="oil"
					style="display: flex;
					justify-content: center;
					align-items: center;
					height: 100%;"
					@click="$refs.popup.open()">
						选择站点
					</view>
				</view>
			</view>
			
			<!-- <view class="tip">
				{{ gasStation.name }}
			</view> -->
			
			<uni-section title="油号" type="line" titleFontSize="34rpx"></uni-section>
			<view class="select-oil">
				<view class="oil-item">
					<view class="oil active-oil"
					style="flex-direction: column;">
						<view class="number">{{ configList.title }}</view>
						<view class="unit">{{ configList.price }}</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="digit" />
			</view>

			<view v-if="form.money" class="tip">
				折后共计{{ 
				(form.money * 
				(configList.preferential ?
				configList.preferential
				: 1)).toFixed(2)
				}}元
			</view>
			<view class="select-money">
				<view v-for="(item, index) in rechargeList" class="money-item" :key="index">
					<view @click="selectMoney(item.price,index)" :class="{ 'active-money' : currentIndex == index }"
						class="money">
						<view class="unit">￥</view>
						<view class="number">{{ item.price }}</view>
					</view>
				</view>
			</view>
			<view class="sumit" @click="submit">提交订单</view>

		</view>

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

		<!-- <uni-fab 
		ref="fab" 
		:content="content" 
		:horizontal="horizontal" 
		:vertical="vertical" 
		:direction="direction"
		@trigger="clickMenu" /> -->
		
		<view class="phone"
		@click="clickService(configList.phone)">
			<uv-icon 
			size="45rpx"
			color="#fff"
			name="phone"></uv-icon>
		</view>
		
		<uv-popup ref="popup" 
		:round="30" 
		:closeOnClickOverlay="false"
		:customStyle="{'max-height': '80vh'}">
			
			<view class="GasStationList">
				<view class="title">
					请选择加油站
				</view>
						
				<view class="select-oilx">
					<view class="oil-itemx" 
					@click="setGasStation(item)"
					:key="index"
					v-for="(item, index) in gasStationList">
						<view class="oilx">
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>
		</uv-popup>

	</view>
</template>

<script setup>
	import PrivacyAgreementPoup from "@/components/PrivacyAgreementPoup/PrivacyAgreementPoup.vue";
	import { mapState } from 'vuex'
	export default {
		name: 'Payment',
		components: {
			PrivacyAgreementPoup
		},
		computed : {
			...mapState(['configList', 'gasStationList', 'gasStation']),
		},
		data() {
			return {
				form: {
					money: ''
				},
				resolvePrivacyAuthorization: {},
				currentIndex: -1,
				content: [{
					iconPath: '/static/payment/wedding-celebration.png',
					text: '婚庆服务',
					active: false,
					path: '/pages/weddingCelebration/weddingCelebration'
				}],
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'vertical',
				rechargeList : [],
				scene : '',
			}
		},
		onShow() {
			if(!this.scene && !this.gasStation.id){
				this.$refs.popup.open()
			}else{
				this.gasStationList.forEach(n => {
					if(n.id == this.scene){
						this.$store.commit('setGasStation', n)
					}
				})
				this.$nextTick(n => {
					this.getRechargePage()
				})
			}
		},
		onLoad (query) {
		    // scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
		    const scene = decodeURIComponent(query.scene || '')
			this.scene = scene
		},
		methods: {
			
			setGasStation(data){
				this.$store.commit('setGasStation', data)
				this.$refs.popup.close()
				
				this.$nextTick(n => {
					this.getRechargePage()
				})
			},
			
			// 用户选择加油金额
			selectMoney(money, item) {
				this.form.money = money
				this.currentIndex = item
			},

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

			},

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

			submit() {
				if (!this.gasStation.id) {
					return this.$refs.popup.open()
				}
				if (!uni.getStorageSync('token')) {
					return uni.navigateTo({
						url: '/pages/login/login'
					})
				}
				let money = (this.form.money *
					(this.configList.preferential ?
					this.configList.preferential
					: 1)).toFixed(2)
				
				// if(!money){
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: ''
				// 	})
				// }
				
				this.$api('twocreateOrderPay', {
					money,
					shopId : this.gasStation.id,
				}, res => {
					this.form.money = ''
					if(res.code == 200){
						uni.requestPayment({
							provider: 'wxpay', // 服务提提供商
							timeStamp: res.result.timeStamp, // 时间戳
							nonceStr: res.result.nonceStr, // 随机字符串
							package: res.result.packageValue,
							signType: res.result.signType, // 签名算法
							paySign: res.result.paySign, // 签名
							success: function (res) {
								console.log('支付成功',res);
								uni.switchTab({
									url: '/pages/center/center'
								})
							},
							fail: function (err) {
								console.log('支付失败',err);
								uni.showToast({
									icon:'none',
									title:"支付失败"
								})
							}
						});
						
						// uni.showToast({
						// 	icon : 'none',
						// 	title: '支付成功'
						// });
					}
				}, "订单创建中...")
			},
			
			//获取充值套餐
			getRechargePage(){
				this.$api('twogetRechargeList', {
					id : this.gasStation.id
				}, res => {
					this.rechargeList = res.result.records
				})
			},
			
			//拨打电话
			clickService(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber,
					success: () => {},
					fail: () => {}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.payment {
		/deep/ .uv-popup{
			z-index: 99999999 !important;
		}
		height: 100vh;
		background: #F1F5F8;
		width: 750rpx;
		margin: 0 auto;
		.GasStationList{
			width: 650rpx;
			text-align: center;
			max-height: calc(80vh - 20rpx);
			overflow: auto;
			.title{
				padding: 20rpx;
				font-size: 35rpx;
				margin-top: 10rpx;
				font-weight: 900;
				position: sticky;
				top: 0;
				background-color: #fff;
			}
			.oil-itemx{
				width: auto;
				box-sizing: border-box;
				border-radius: 20rpx;
				margin: 20rpx;
				padding: 30rpx 20rpx;
				overflow: hidden;
				background-color: #00aaff;
				.oilx{
					align-items: flex-start;
					padding: 20rpx;
					font-size: 30rpx;
					color: #fff;
				}
			}
		}
		.container{
			.oil-item{
				.active-oil{
					
				}
				.oil{
					align-items: flex-start;
					padding-left: 30rpx;
					padding-right: 30rpx;
					.number{
						font-size: 26rpx;
					}
					.unit{
						font-size: 30rpx;
						margin-top: 10rpx;
					}
				}
			}
		}
	}
	
	.phone{
		position: fixed;
		right: 100rpx;
		bottom: 10%;
		background-color: #00aaff;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 0 10rpx 10rpx #00aaff55;
	}

	.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>