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" style="width: 78%;">
						<view class="top-img">
							<image v-if="!store.logo" src="../../static/logo.png" mode="aspectFit"></image>
							<image v-else :src="baseUrl+store.logo" mode="aspectFit"></image>
						</view>
						<view style="width: 80%;">
							<view class="top-title">{{store.name}}{{store.description ? "("+store.description+")" : ""}}
							</view><!--九州加油站（总站）-->
							<view class="top-hui">{{store.address}}</view><!--平安大道东200米-->
							<view class="top-hong">￥{{oilPrice}}/{{oilUnit ? oilUnit : "L"}}</view>
						</view>
					</view>
					<view class="" @click="goRefuel" style="width: 22%;font-size: 14px;">
						<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 v-if="appltType == 'ALIPAY'" style="height: 400px;overflow-y: scroll;">
					<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 class="box-oil" v-for="(item,index) in oilNumberList" :key="index"
								:class=" {'xz' :hindex == index }" @click="getHIndex(index,item)">
								<text>{{item.oilName}}</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 class="box-oil" :class=" {'xz' :qindex == index }" v-for="(item,index) in oilGunList"
								:key="index" @click="getQIndex(index,item)">
								<text>{{item.gunName}}</text>
							</view>
						</view>
					</view>
					<view class="fa-box">
						<view class="fa-title">请输入加油金额</view>
						<view class="inputkuang" @click="openKey">
							<view class="sbox">￥</view>
							<view class="sbox" style="text-align: center;font-weight: bold;">{{value}}</view>
							<view class="sbox-hui">约{{liters}}L</view>
						</view>
						<view class="wrap-box">
							<view class="box-oil1" :class=" {'xz' :aindex == index }" @click="getAIndex(index,item)"
								v-for="(item,index) in amountList" :key="index">
								<text>￥{{item}}</text>
							</view>
						</view>
					</view>
					<view class="anniu" @click="submitAmount">
						<text>立即加油</text>
					</view>
				</view>
				
				<view v-if="appltType == 'WECHAT'" style="height: 500px;overflow-y: scroll;">
					<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 class="box-oil" v-for="(item,index) in oilNumberList" :key="index"
								:class=" {'xz' :hindex == index }" @click="getHIndex(index,item)">
								<text>{{item.oilName}}</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 class="box-oil" :class=" {'xz' :qindex == index }" v-for="(item,index) in oilGunList"
								:key="index" @click="getQIndex(index,item)">
								<text>{{item.gunName}}</text>
							</view>
						</view>
					</view>
					<view class="fa-box">
						<view class="fa-title">请输入加油金额</view>
						<view class="inputkuang" @click="openKey">
							<view class="sbox">￥</view>
							<view class="sbox" style="text-align: center;font-weight: bold;">{{value}}</view>
							<view class="sbox-hui">约{{liters}}L</view>
						</view>
						<view class="wrap-box">
							<view class="box-oil1" :class=" {'xz' :aindex == index }" @click="getAIndex(index,item)"
								v-for="(item,index) in amountList" :key="index">
								<text>￥{{item}}</text>
							</view>
						</view>
					</view>
					<view class="anniu" @click="submitAmount">
						<text>立即加油</text>
					</view>
				</view>

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

			<view style="margin-top: 50px;">
				<uni-popup ref="popup1" type="bottom" background-color="white" mask-background-color="rgba(0,0,0,0.0)">
					<keyboard :pApplt="appltType" @isPay="submitAmount" @amount="changeVal" @backVal="backspaceVal">
					</keyboard>
				</uni-popup>
			</view>

			<view>
				<uni-popup ref="popup" type="bottom">
					<view style="background-color: #f4f5f6;width: 100%;height: 55vh;">
						<view style="display: flex;justify-content: space-between;height: 50px;line-height: 50px">
							<view style="font-size: 18px;margin-left: 40%;">请选择员工</view>
							<uni-icons type="closeempty" size="30" @click="closeStaff"></uni-icons>
						</view>
						<view class="wrap-box1" style="margin-left: 5%;">
							<!-- <view class="box-oil2" :class=" {'xz' :sindex == index }" @click="getSIndex(index)"
								v-for="(item,index) in 19" :key="index">
								<text>{{index}}员工</text>
							</view> -->
							<view class="box-oil2" :class=" {'xz' :sindex == index }" v-for="(item,index) in staffList"
								:key="index" @click="getSIndex(index,item.id)">
								<text>{{item.realName}}</text>
							</view>
						</view>
						<tabbar></tabbar>
					</view>
				</uni-popup>
			</view>

			<tabbar></tabbar>
		</view>
	</view>
</template>

<script>
	import tabbar from "../../components/tabbar/tabbar.vue"
	import config from '@/config'
	import request from '../../utils/request'
	export default {
		data() {
			return {
				appltType: uni.getStorageSync("appltType"),
				value: '',
				liters: 0,
				show: false,
				pic: 0,
				hindex: 0,
				qindex: 0,
				aindex: null,
				sindex: null,
				// 店铺信息
				store: {
					name: "测试油站",
					description: "济南分店",
					address: "济南槐荫区"
				},
				// 店铺福利信息
				welfare: [],
				// 距离信息
				distance: "",
				// 当前店铺id
				storeId: "",
				// 油号列表信息
				oilNumberList: [],
				// 油枪列表信息
				oilGunList: [],
				// 员工列表信息
				staffList: [],
				// 加油金额列表
				amountList: [100, 200, 300],
				// url信息
				baseUrl: this.$baseUrl,
				// 油价
				oilPrice: 0,
				// 油品单位
				oilUnit: "",
				AppToken: uni.getStorageSync("App-Token"),

				// 油品订单信息
				oilOrder: {
					storeId: "",
					couponId: "",
					commissionAmount: 0,
					staffId: "",
					terminal: "applet",
					oils: "",
					oilGunNum: "",
					oilNum: "",
					orderAmount: 0,
					discountAmount: 0,
					payAmount: 0,
					payType: uni.getStorageSync("appltType"),
				},
			}
		},
		components: {
			tabbar
		},
		onLoad(query) {
			if (uni.getStorageSync("appltType") == "WECHAT") {
				const q = decodeURIComponent(query.q) // 获取到二维码原始链接内容
				if (query.q) {
					let str = q.split("?")[1];
					let storeId = "19";

					let staffId = "";
					if (str.includes("&")) {
						let arr = str.split("&");
						arr.forEach(item => {
							if (item.includes("storeId")) {
								storeId = item.split("=")[1]
							} else {
								staffId = item.split("=")[1]
							}
						})
					} else {
						storeId = str.split("=")[1]
					}
					uni.setStorageSync("storeId", storeId)
					uni.setStorageSync("inviteStaffId", staffId)
					this.storeId = uni.getStorageSync("storeId")
					this.staffId = uni.getStorageSync("inviteStaffId")
					this.getStore(uni.getStorageSync("storeId"));
				}
			} else {
				if (uni.getStorageSync("storeId")) {
					this.getStore(uni.getStorageSync("storeId"));
				}
			}



		},
		onShow() {
			// this.isExistStoreId();
			this.getStore(uni.getStorageSync("storeId"));
			// this.getStore(0);
			this.getTheJudgmentIsTheSame()

		},
		methods: {
			// 打开数字键盘
			openKey() {
				this.show = true
				this.$refs.popup1.open('bottom')
			},
			isExistStoreId() {
				if (uni.getStorageSync("storeId") != "") {
					this.getStore(uni.getStorageSync("storeId"));
				} else {
					this.getAddress();
				}
			},
			// 获取门店信息
			getStore(id) {
				// uni.showToast({
				// 	title:333
				// })
				let _this = this;
				request({
					url: "business/storeInformation/store/queryStoreById",
					method: 'post',
					data: {
						"storeId": id
					},
				}).then((res) => {
					_this.getOilNumber(id);
					_this.getStaffList(id)
					_this.store = res.data
					_this.storeId = res.data.id;
					uni.setStorageSync("storeId", _this.store.id)
					uni.setStorageSync("chainStoreId", _this.store.chainStoreId)
					let welfare = res.data.welfare
					if (welfare) {
						if (welfare.includes(",")) {
							_this.welfare = res.data.welfare.split(",")
						} else {
							_this.welfare.push(res.data.welfare)
						}
					}
				}).catch(err => {
					uni.showLoading({
						title: JSON.stringify(err) + 222
					})
				})
			},
			// 获取当前位置
			getAddress() {
				let _this = this;
				uni.getLocation({
					// 谷歌使用wgs84  其他使用gcj02
					type: 'gcj02', // 使用国测局坐标系
					success: function(res) {
						// console.log('经度: ' + res.longitude);
						// console.log('纬度: ' + res.latitude);
						request({
							url: "business/storeInformation/store/recentlyStore",
							method: 'post',
							data: {
								"lon": res.longitude,
								"lat": res.latitude
							},
						}).then((response) => {
							_this.distance = (response.data.distance).toFixed(1);
							_this.store = response.data.store;
							_this.storeId = response.data.store.id;
							_this.getOilNumber(_this.storeId);
							_this.getStaffList(_this.storeId)
							let welfare = response.data.store.welfare;
							if (welfare != undefined && welfare != null && welfare != "") {
								if (welfare.includes(",")) {
									_this.welfare = response.data.store.welfare.split(",");
								} else {
									_this.welfare.push(response.data.store.welfare);
								}
							}
						})
					},
					fail: function(err) {
						_this.getStore(0);
					}
				});
			},
			// 获取当前店铺油号信息
			getOilNumber(storeId) {
				let _this = this;
				request({
					// url: "business/petrolStationManagement/oilNumber/getOilNumberName/" + storeId,
					url: "business/petrolStationManagement/oilGun/selectByNumber/" + storeId,
					method: 'get',
				}).then((res) => {
					_this.oilNumberList = res.data;
					if (res.data) {
						// _this.getOilGun(res.data[0].numberId);
						_this.oilPrice = res.data[0].oilPrice
						_this.oilUnit = res.data[0].unit
						_this.oilOrder.oils = res.data[0].oilNameId
						if (res.data[0].oilGunList) {
							_this.oilGunList = res.data[0].oilGunList
							_this.oilOrder.oilGunNum = res.data[0].oilGunList[0].id
							uni.setStorageSync("tankId", res.data[0].oilGunList[0].tankId)
						}
					}
				})
			},
			// 获取当前店铺油号对应的油枪信息
			getOilGun(numberId) {
				let _this = this;
				request({
					url: "business/petrolStationManagement/oilGun/queryGunList/" + numberId,
					method: 'get',
				}).then((res) => {
					_this.oilGunList = res.data
					_this.oilOrder.oilGunNum = res.data[0].id
				})
			},
			// 获取当前店铺员工信息列表
			getStaffList(storeId) {
				let _this = this;
				request({
					url: "business/member/staff/queryList",
					method: 'post',
					data:{storeId:storeId}
				}).then((res) => {
					_this.staffList = res.data
				})
			},
			// 跳转订单详情页，并支付
			getSIndex(index, id) {
				this.sindex = index
				// 校验油罐内油量是否足够
				request({
					url: "business/petrolStationManagement/oilTank/" + uni.getStorageSync('tankId'),
					method: 'get',
				}).then((res) => {
					if (res.data.storedQuantity - this.liters < 0) {
						uni.showToast({
							title: "所加油的升数大于油罐内的升数，请重新选择加油升数",
							icon: "none"
						})
						return;
					} else {
						this.toPayment(id)
					}

				})
			},
			toPayment(id) {
				this.oilOrder.orderAmount = this.value
				this.oilOrder.storeId = this.storeId
				this.oilOrder.staffId = id
				this.oilOrder.oilNum = (this.value / this.oilPrice).toFixed(2)
				this.oilOrder.tankId = uni.getStorageSync("tankId")
				let _this = this;
				// 添加油品订单信息
				request({
					url: "business/oilOrder/addOilOrder",
					method: 'post',
					data: _this.oilOrder,
				}).then((res) => {
					uni.navigateTo({
						url: '/pagesRefuel/orderDetail/index?orderNo=' + res.data,
					})
				})
			},
			// 选择加油金额
			getAIndex(index, amount) {
				this.value = amount + ""
				this.aindex = index
				this.liters = (amount / this.oilPrice).toFixed(2)
			},
			// 选择油品信息
			getHIndex(index, data) {
				this.hindex = index
				// console.log(data)
				// this.getOilGun(data.numberId)
				this.oilGunList = data.oilGunList
				this.oilOrder.oilGunNum = data.oilGunList[0].id
				this.oilPrice = data.oilPrice
				this.oilUnit = data.unit
				this.oilOrder.oils = data.oilNameId
				uni.setStorageSync("tankId", data.oilGunList[0].tankId)
			},
			// 选择油枪信息
			getQIndex(index, data) {
				this.qindex = index
				this.oilOrder.oilGunNum = data.id
				uni.setStorageSync("tankId", data.tankId)
			},
			goRefuel() {
				uni.navigateTo({
					url: '/pagesRefuel/pagesRefuel/index'
				})
			},
			change() {

			},
			// 关闭弹窗
			closeStaff() {
				this.$refs.popup.close()
			},
			// 数字键盘确定按钮
			submitAmount() {
				// 校验油罐内油量是否足够
				request({
					url: "business/petrolStationManagement/oilTank/" + uni.getStorageSync('tankId'),
					method: 'get',
				}).then((res) => {
					if (res.data.storedQuantity - this.liters < 0) {
						uni.showToast({
							title: "所加油的升数大于油罐内的升数，请重新选择加油升数",
							icon: "none"
						})
						return;
					} else {
						if (this.value != "" && this.qindex != null) {
							this.show = false
							if (uni.getStorageSync("inviteStaffId") || this.staffList.length==0) {
								this.toPayment(uni.getStorageSync("inviteStaffId"))
							} else {
								this.$refs.popup.open('bottom')
							}
						} else {
							if (this.value == "") {
								uni.showToast({
									title: "请输入加油金额",
									icon: "error"
								})
							} else {
								uni.showToast({
									title: "请选择油枪号",
									icon: "error"
								})
							}
						}
					}
				})


			},
			changeVal(val) {
				this.value = val;
				this.liters = (this.value / this.oilPrice).toFixed(2)
			},
			backspaceVal(val) {
				this.value = val;
				if (val == "") {
					this.amount = 0
					this.liters = 0
				} else {
					this.amount = val;
					this.liters = (this.value / this.oilPrice).toFixed(2)
				}
			},
			valChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				uni.vibrateShort({
					success: function() {}
				});
				let index = this.value.indexOf(".")
				if (index != -1) {
					if ((this.value.length - index) >= 3) {
						return;
					}

				} else {
					if (this.value.length >= 7 && val != ".") {
						return;
					}
				}
				this.value += val;
				this.liters = (this.value / this.oilPrice).toFixed(2)
				// console.log(this.value);
			},
			// 判断token是否与当前连锁店id相同
			async getTheJudgmentIsTheSame() {
				// 判断是否登录
				if (!this.AppToken) {
					return;
				}
				await request({
					url: 'chainStoreInfo/theJudgmentIsTheSame',
					method: 'get',
					data: {
						"chainStoreId": uni.getStorageSync("chainStoreId")
					}
				}).then(res => {
					if (!res.data) {
						uni.removeStorageSync("App-Token");
					}
				})

				if (uni.getStorageSync("appltType")== "WECHAT") {
					// 判断当前登录的code是否相同
					wx.login({
						success(res) {
							if (res.code) {
								//发起网络请求
								request({
									url: 'clientApi/sign/mpWxLogin2',
									method: "POST",
									data: {
										code: res.code
									}
								}).then(res => {
									if (!res.data) {
										uni.removeStorageSync("App-Token");
									}
								})
							} else {
								console.log('登录失败！' + res.errMsg)
							}
						}
					})
				}
			},
			// 退格键被点击
			backspace() {
				uni.vibrateShort({
					success: function() {}
				});
				// 删除value的最后一个字符
				if (this.value.length) {
					this.value = this.value.substr(0, this.value.length - 1);
					this.liters = (this.value / this.oilPrice).toFixed(2)
				}
				// 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: 110px;
		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;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

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

	.wrap-box1 {
		width: 100%;
		display: flex;
		flex-wrap: wrap;

		overflow-y: scroll;
	}

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

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

	.box-oil2 {
		width: 28%;
		height: 25px;
		line-height: 25px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #666666;
		background: white;
		margin-right: 13px;

		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>