741 lines
		
	
	
		
			18 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			741 lines
		
	
	
		
			18 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
| <template>
 | ||
| 	<view class="content">
 | ||
| 		<view class="container">
 | ||
| 			<headers :titles="titles"><u-icon name="arrow-left" color="#fff" size="22"></u-icon></headers>
 | ||
| 			<view class="input-box">
 | ||
| 				<view style="margin-right: 10px;">总收款金额</view>
 | ||
| 				<view class="">{{AmountCollected}}</view>
 | ||
| 				<!-- <input type="number" /> -->
 | ||
| 
 | ||
| 			</view>
 | ||
| 			<view class="input-box">
 | ||
| 				<view style="margin-right: 10px;">优惠后收款金额</view>
 | ||
| 				<view class="">{{paymentAmount}}</view>
 | ||
| 				<!-- <input type="number" /> -->
 | ||
| 			</view>
 | ||
| 			<view class="input-box">
 | ||
| 				<view style="margin-right: 10px;">优惠金额</view>
 | ||
| 				<view class="">{{DiscountAmount}}</view>
 | ||
| 				<!-- <input type="number" /> -->
 | ||
| 
 | ||
| 			</view>
 | ||
| 			<view class="input-box">
 | ||
| 				<view style="margin-right: 10px;">储值卡消费金额</view>
 | ||
| 				<view class="">{{balanceRedece}}</view>
 | ||
| 				<!-- <input type="number" /> -->
 | ||
| 
 | ||
| 			</view>
 | ||
| 			<!-- <view class="title_">选择油号</view>
 | ||
| 			<view class="warp-box">
 | ||
| 				<view class="w-box" :class="{ 'acv' : oilIndex == index }" @click="getoilIndex(index)"
 | ||
| 					v-for="(item,index) in oilList" :key="index">
 | ||
| 					{{item}}
 | ||
| 				</view>
 | ||
| 
 | ||
| 			</view> -->
 | ||
| 			<view class="title_">选择油枪</view>
 | ||
| 			<view class="warp-box">
 | ||
| 				<view class="w-box" :class="{ 'acv' : spearIndex == index }" v-for="(item,index) in spearList"
 | ||
| 					:key="index" @click="getspearIndex(index,item)">
 | ||
| 					{{item.gunName}}
 | ||
| 				</view>
 | ||
| 			</view>
 | ||
| 			<view style="width: 100%; height: 500px; "></view>
 | ||
| 			<view class="bai-kuang">
 | ||
| 				<view class="kuang-top">
 | ||
| 					<view class="w-shi" @click="show = true">添加备注</view>
 | ||
| 					<view style="color: #E8E8E8;"> | </view>
 | ||
| 					<view class="w-shi" @click="gosearchVip()">{{userInfo ? userInfo.mobile : '搜索会员'}}</view>
 | ||
| 				</view>
 | ||
| 				<!-- 键盘区域 -->
 | ||
| 				<view class="num-box">
 | ||
| 
 | ||
| 					<view class="k-box" v-for="(item,index) in keyboardList" :key="index" @click="KeyboardLogic(item)">
 | ||
| 						<!-- pd- -->
 | ||
| 						<view class="CentralLogic" v-if="item.type == 'num' ">
 | ||
| 							{{item.value}}
 | ||
| 						</view>
 | ||
| 						<view class="Centralimg" v-if="item.type == 'img' ">
 | ||
| 							<view class="icon-box">
 | ||
| 								<image src="/static/imgs/smzf.png" v-if="item.value == 'smzf' " @click="scanQrcode()">
 | ||
| 								</image>
 | ||
| 								<image src="/static/imgs/skzf.png" v-if="item.value == 'skzf' " @click="swipeCard()">
 | ||
| 								</image>
 | ||
| 								<image src="/static/imgs/hyzf.png" v-if="item.value == 'hyzf' "
 | ||
| 									@click="scanAppletQrCode()"></image>
 | ||
| 								<image src="/static/imgs/xjzf.png" v-if="item.value == 'xjzf' " @click="cashPay()">
 | ||
| 								</image>
 | ||
| 								<image src="/static/imgs/scjian.png" style="height: 30px;" v-if="!item.value"></image>
 | ||
| 							</view>
 | ||
| 							<view class="icon-size" v-if="item.value == 'smzf' " @click="scanQrcode()">扫码支付</view>
 | ||
| 							<view class="icon-size" v-if="item.value == 'skzf' " @click="swipeCard()">刷卡支付</view>
 | ||
| 							<view class="icon-size" v-if="item.value == 'hyzf' " @click="scanAppletQrCode()">会员支付</view>
 | ||
| 							<view class="icon-size" v-if="item.value == 'xjzf' " @click="cashPay()">现金支付</view>
 | ||
| 						</view>
 | ||
| 					</view>
 | ||
| 
 | ||
| 				</view>
 | ||
| 				<!-- 垫子 -->
 | ||
| 				<view style="width: 100%; height: 25px; "></view>
 | ||
| 
 | ||
| 			</view>
 | ||
| 			<u-popup :show="show" mode="bottom" :round="10" @close="close">
 | ||
| 				<view class="bottom_box">
 | ||
| 					<u--textarea v-model="value1" placeholder="请输入内容"></u--textarea>
 | ||
| 					<view
 | ||
| 						style="width: 100%; display: flex;align-items: center;justify-content: space-around;margin-top: 20px; ">
 | ||
| 						<view class="anniuq" @click="submitRemark()">确定</view>
 | ||
| 						<view class="anniux" @click="close">取消</view>
 | ||
| 					</view>
 | ||
| 				</view>
 | ||
| 			</u-popup>
 | ||
| 		</view>
 | ||
| 	</view>
 | ||
| </template>
 | ||
| 
 | ||
| <script>
 | ||
| 	import request from "../../utils/request";
 | ||
| 	import headers from '../../components/header/headers.vue'
 | ||
| 
 | ||
| 	export default {
 | ||
| 		data() {
 | ||
| 			return {
 | ||
| 				value1: '',
 | ||
| 				show: false,
 | ||
| 				userId: "",
 | ||
| 				userInfo: "",
 | ||
| 				AmountCollected: "",
 | ||
| 				paymentAmount: "",
 | ||
| 				DiscountAmount: 0,
 | ||
| 				balance: 0,
 | ||
| 				balanceRedece: 0,
 | ||
| 				// 是否使用囤油卡
 | ||
| 				isOilStorageCard: false,
 | ||
| 				authCode: "",
 | ||
| 				oilName: "",
 | ||
| 				tankId: "",
 | ||
| 				oilPrice: "",
 | ||
| 				oilGunNum: "",
 | ||
| 				oilCardAmount: 0,
 | ||
| 				levelAmount: 0,
 | ||
| 				activeAmount: 0,
 | ||
| 				// 支付订单信息
 | ||
| 				oilOrder: {},
 | ||
| 				titles: "收款",
 | ||
| 				oilList: [
 | ||
| 					"92#", "95#", "98#"
 | ||
| 				],
 | ||
| 				oilIndex: 0,
 | ||
| 				spearList: [
 | ||
| 					"1号枪", "2号枪", "3号枪"
 | ||
| 				],
 | ||
| 				spearIndex: 0,
 | ||
| 				orderNo: "",
 | ||
| 				preferentialData: {},
 | ||
| 				// 键盘
 | ||
| 				keyboardList: [{
 | ||
| 						value: '1',
 | ||
| 						type: 'num'
 | ||
| 					},
 | ||
| 					{
 | ||
| 						value: '2',
 | ||
| 						type: 'num'
 | ||
| 					},
 | ||
| 					{
 | ||
| 						value: '3',
 | ||
| 						type: 'num'
 | ||
| 					},
 | ||
| 					{
 | ||
| 						value: 'smzf',
 | ||
| 						type: 'img'
 | ||
| 					},
 | ||
| 					{
 | ||
| 						value: '4',
 | ||
| 						type: 'num'
 | ||
| 					},
 | ||
| 					{
 | ||
| 						value: '5',
 | ||
| 						type: 'num'
 | ||
| 					},
 | ||
| 					{
 | ||
| 						value: '6',
 | ||
| 						type: 'num'
 | ||
| 					},
 | ||
| 					{
 | ||
| 						value: 'skzf',
 | ||
| 						type: 'img'
 | ||
| 					},
 | ||
| 					{
 | ||
| 						value: '7',
 | ||
| 						type: 'num'
 | ||
| 					},
 | ||
| 					{
 | ||
| 						value: '8',
 | ||
| 						type: 'num'
 | ||
| 					},
 | ||
| 					{
 | ||
| 						value: '9',
 | ||
| 						type: 'num'
 | ||
| 					},
 | ||
| 					{
 | ||
| 						value: 'hyzf',
 | ||
| 						type: 'img'
 | ||
| 					},
 | ||
| 					{
 | ||
| 						value: '0',
 | ||
| 						type: 'num'
 | ||
| 					},
 | ||
| 					{
 | ||
| 						value: '.',
 | ||
| 						type: 'num'
 | ||
| 					},
 | ||
| 					{
 | ||
| 						value: null,
 | ||
| 						type: 'img'
 | ||
| 					},
 | ||
| 					{
 | ||
| 						value: 'xjzf',
 | ||
| 						type: 'img'
 | ||
| 					},
 | ||
| 				]
 | ||
| 
 | ||
| 			}
 | ||
| 		},
 | ||
| 		onLoad(e) {
 | ||
| 			if (e.userId) {
 | ||
| 				this.userId = e.userId
 | ||
| 				this.AmountCollected = e.AmountCollected
 | ||
| 				this.getUser();
 | ||
| 			}
 | ||
| 		},
 | ||
| 		onShow() {
 | ||
| 			// this.actList = ["1", "1", "1", "1", "1", ]
 | ||
| 			// this.status = "nomore" 底部刷新结束
 | ||
| 			this.getOilGun()
 | ||
| 		},
 | ||
| 		onPullDownRefresh() {
 | ||
| 			console.log("刷新");
 | ||
| 			uni.stopPullDownRefresh()
 | ||
| 		},
 | ||
| 		onReachBottom() {
 | ||
| 			// this.show = true
 | ||
| 			setTimeout(() => {
 | ||
| 				console.log("加载执行");
 | ||
| 			}, 2000)
 | ||
| 		},
 | ||
| 		components: {
 | ||
| 			headers
 | ||
| 		},
 | ||
| 		methods: {
 | ||
| 			// 确定备注
 | ||
| 			submitRemark() {
 | ||
| 				this.show = false
 | ||
| 				this.oilOrder.remark = this.value1
 | ||
| 			},
 | ||
| 			close() {
 | ||
| 				this.show = false
 | ||
| 			},
 | ||
| 
 | ||
| 			// 获取优惠信息
 | ||
| 			getPaymentPreferential() {
 | ||
| 				if (!this.AmountCollected || !this.userInfo) {
 | ||
| 					return;
 | ||
| 				}
 | ||
| 				this.DiscountAmount = 0;
 | ||
| 				let type = 0;
 | ||
| 				if (this.balanceRedece == 0) {
 | ||
| 					type = 2
 | ||
| 				} else {
 | ||
| 					type = 0
 | ||
| 				}
 | ||
| 				let map = {
 | ||
| 					//支付类型 0:储值卡 1:囤油卡
 | ||
| 					type: type,
 | ||
| 					//支付金额
 | ||
| 					amount: this.AmountCollected,
 | ||
| 					//可用油品Id
 | ||
| 					oilId: this.oilName,
 | ||
| 					//店铺id
 | ||
| 					storeId: uni.getStorageSync("storeId"),
 | ||
| 					//会员等级
 | ||
| 					mtUserLevel: this.userInfo.gradeId,
 | ||
| 					//用户id
 | ||
| 					userId: this.userInfo.id,
 | ||
| 				}
 | ||
| 				request({
 | ||
| 					url: "business/marketingActivity/activeExchange/getPaymentActive",
 | ||
| 					method: 'get',
 | ||
| 					params: map,
 | ||
| 				}).then((res) => {
 | ||
| 					this.preferentialData = res.data
 | ||
| 					if (res.data.memberFavorableAmount) {
 | ||
| 						this.DiscountAmount += res.data.memberFavorableAmount
 | ||
| 						this.oilOrder.levelAmount = res.data.memberFavorableAmount
 | ||
| 					}
 | ||
| 					if (res.data.cardFavorableAmount) {
 | ||
| 						this.DiscountAmount += res.data.cardFavorableAmount
 | ||
| 					}
 | ||
| 					if (res.data.activeFavorableAmount) {
 | ||
| 						this.DiscountAmount += res.data.activeFavorableAmount
 | ||
| 						this.oilOrder.activeAmount = res.data.activeFavorableAmount
 | ||
| 					}
 | ||
| 					this.countAmount()
 | ||
| 				})
 | ||
| 			},
 | ||
| 			// 获取用户信息
 | ||
| 			getUser() {
 | ||
| 				request({
 | ||
| 					url: '/business/userManager/user/' + this.userId,
 | ||
| 					method: 'get',
 | ||
| 				}).then((res) => {
 | ||
| 					this.userInfo = res.data
 | ||
| 					this.balance = res.data.cardBalance
 | ||
| 					this.getPaymentPreferential()
 | ||
| 				})
 | ||
| 			},
 | ||
| 			// 计算收款金额
 | ||
| 			countAmount() {
 | ||
| 				if (this.balance >= (this.AmountCollected - this.DiscountAmount - this.oilCardAmount)) {
 | ||
| 					this.balanceRedece = this.AmountCollected - this.DiscountAmount - this.oilCardAmount
 | ||
| 					this.paymentAmount = 0
 | ||
| 				} else {
 | ||
| 					this.balanceRedece = this.balance
 | ||
| 					this.paymentAmount = (this.AmountCollected - this.DiscountAmount - this.balance - this.oilCardAmount)
 | ||
| 						.toFixed(2)
 | ||
| 				}
 | ||
| 			},
 | ||
| 			// 二维码
 | ||
| 			scanQrcode() {
 | ||
| 				if (!this.AmountCollected) {
 | ||
| 					uni.showToast({
 | ||
| 						title: "请先输入收款金额",
 | ||
| 						icon: "none"
 | ||
| 					})
 | ||
| 					return;
 | ||
| 				}
 | ||
| 				let _this = this
 | ||
| 				uni.scanCode({
 | ||
| 					onlyFromCamera: true,
 | ||
| 					success: (res) => {
 | ||
| 						console.log('扫描二维码成功,结果:' + JSON.stringify(res) + res.result);
 | ||
| 						_this.authCode = res.result
 | ||
| 						_this.payMent()
 | ||
| 					},
 | ||
| 					error: (res) => {
 | ||
| 						console.log('扫描二维码出现错误')
 | ||
| 					}
 | ||
| 				})
 | ||
| 			},
 | ||
| 			// 扫描小程序会员码支付
 | ||
| 			scanAppletQrCode() {
 | ||
| 				if (!this.AmountCollected) {
 | ||
| 					uni.showToast({
 | ||
| 						title: "请先输入收款金额",
 | ||
| 						icon: "none"
 | ||
| 					})
 | ||
| 					return;
 | ||
| 				}
 | ||
| 				this.oilOrder.payType = "APPLET_CODE"
 | ||
| 				this.oilOrder.orderNo = this.orderNo
 | ||
| 				this.oilOrder.orderAmount = this.AmountCollected
 | ||
| 				this.oilOrder.payAmount = this.paymentAmount
 | ||
| 				this.oilOrder.discountAmount = this.DiscountAmount
 | ||
| 				this.oilOrder.balanceAmount = this.balanceRedece
 | ||
| 				this.oilOrder.isOilStorageCard = this.isOilStorageCard
 | ||
| 				this.oilOrder.isUseChildCard = this.isUseChildCard
 | ||
| 				this.oilOrder.activeId = this.preferentialData.activeId
 | ||
| 				this.oilOrder.cardFavorableId = this.preferentialData.cardFavorableId
 | ||
| 				this.oilOrder.recordId = this.preferentialData.recordId
 | ||
| 				this.oilOrder.type = this.preferentialData.type
 | ||
| 				this.oilOrder.balanceAmountSale = this.balanceRedece
 | ||
| 				this.oilOrder.levelAmount = this.levelAmount
 | ||
| 				this.oilOrder.activeAmount = this.activeAmount
 | ||
| 				this.oilOrder.oils = this.oilName
 | ||
| 				this.oilOrder.tankId = this.tankId
 | ||
| 				this.oilOrder.oilPrice = this.oilPrice
 | ||
| 				this.oilOrder.oilCardAmount1 = this.oilCardAmount
 | ||
| 				this.oilOrder.userId = this.userInfo.id
 | ||
| 				this.oilOrder.oilGunNum = this.oilGunNum
 | ||
| 				this.oilOrder.payUser = this.userInfo.mobile
 | ||
| 				let _this = this
 | ||
| 				uni.scanCode({
 | ||
| 					onlyFromCamera: true,
 | ||
| 					success: (res) => {
 | ||
| 						console.log('扫描二维码成功,结果:' + JSON.stringify(res) + res.result);
 | ||
| 						_this.authCode = res.result
 | ||
| 						_this.oilOrder.authCode = _this.authCode
 | ||
| 						request({
 | ||
| 							url: '/business/oilOrder/scanAppletQrCodePos',
 | ||
| 							method: 'post',
 | ||
| 							data: _this.oilOrder
 | ||
| 						}).then((resp) => {
 | ||
| 							if (resp.data.success == 'success') {
 | ||
| 								_this.reset()
 | ||
| 								// uni.showToast({
 | ||
| 								// 	title: "支付成功",
 | ||
| 								// 	icon: "success"
 | ||
| 								// })
 | ||
| 								uni.navigateTo({
 | ||
| 									url: "/pagesHome/PaymentResults/PaymentResults?orderNo=" +
 | ||
| 										resp.data.orderNo
 | ||
| 								})
 | ||
| 							} else {
 | ||
| 								uni.showToast({
 | ||
| 									title: resp.data.error,
 | ||
| 									icon: "none"
 | ||
| 								})
 | ||
| 							}
 | ||
| 						})
 | ||
| 					},
 | ||
| 					error: (res) => {
 | ||
| 						console.log('扫描二维码出现错误')
 | ||
| 					}
 | ||
| 				})
 | ||
| 			},
 | ||
| 			// 刷卡支付
 | ||
| 			swipeCard() {
 | ||
| 				uni.showToast({
 | ||
| 					title: "暂未开发",
 | ||
| 					icon: "error"
 | ||
| 				})
 | ||
| 			},
 | ||
| 			// 现金支付
 | ||
| 			cashPay() {
 | ||
| 				if (!this.AmountCollected) {
 | ||
| 					uni.showToast({
 | ||
| 						title: "请先输入收款金额",
 | ||
| 						icon: "none"
 | ||
| 					})
 | ||
| 					return;
 | ||
| 				}
 | ||
| 				this.oilOrder.payType = "CASH"
 | ||
| 				this.payMent()
 | ||
| 			},
 | ||
| 			getOilCardAmount() {
 | ||
| 				if (!this.userInfo) {
 | ||
| 					return;
 | ||
| 				}
 | ||
| 				request({
 | ||
| 					url: '/business/marketingActivity/cardFuelRecord/getRecordByUserId',
 | ||
| 					method: 'get',
 | ||
| 					params: {
 | ||
| 						mtUserId: this.userInfo.id
 | ||
| 					}
 | ||
| 				}).then((res) => {
 | ||
| 					res.data.forEach(item => {
 | ||
| 						if (item.oilType == this.oilName) {
 | ||
| 							let liters = this.AmountCollected / this.oilPrice
 | ||
| 							this.oilCardAmount = item.lockupPrice * liters
 | ||
| 						}
 | ||
| 					})
 | ||
| 				})
 | ||
| 			},
 | ||
| 			// 调用支付接口
 | ||
| 			payMent() {
 | ||
| 				this.oilOrder.orderNo = this.orderNo
 | ||
| 				this.oilOrder.orderAmount = this.AmountCollected
 | ||
| 				this.oilOrder.payAmount = this.paymentAmount
 | ||
| 				this.oilOrder.discountAmount = this.DiscountAmount
 | ||
| 				this.oilOrder.balanceAmount = this.balanceRedece
 | ||
| 				this.oilOrder.isOilStorageCard = this.isOilStorageCard
 | ||
| 				this.oilOrder.isUseChildCard = this.isUseChildCard
 | ||
| 				this.oilOrder.activeId = this.preferentialData.activeId
 | ||
| 				this.oilOrder.cardFavorableId = this.preferentialData.cardFavorableId
 | ||
| 				this.oilOrder.recordId = this.preferentialData.recordId
 | ||
| 				this.oilOrder.type = this.preferentialData.type
 | ||
| 				this.oilOrder.balanceAmountSale = this.balanceRedece
 | ||
| 				this.oilOrder.levelAmount = this.levelAmount
 | ||
| 				this.oilOrder.activeAmount = this.activeAmount
 | ||
| 				this.oilOrder.authCode = this.authCode
 | ||
| 				this.oilOrder.oils = this.oilName
 | ||
| 				this.oilOrder.tankId = this.tankId
 | ||
| 				this.oilOrder.oilPrice = this.oilPrice
 | ||
| 				this.oilOrder.oilCardAmount1 = this.oilCardAmount
 | ||
| 				this.oilOrder.oilGunNum = this.oilGunNum
 | ||
| 				if (this.userInfo) {
 | ||
| 					this.oilOrder.userId = this.userInfo.id
 | ||
| 					this.oilOrder.payUser = this.userInfo.mobile
 | ||
| 				}
 | ||
| 
 | ||
| 				request({
 | ||
| 					url: "business/oilOrder/addOrderPos",
 | ||
| 					method: 'post',
 | ||
| 					data: this.oilOrder
 | ||
| 				}).then((res) => {
 | ||
| 					this.orderNo = res.data.orderNo
 | ||
| 					if (res.data.code == 1) {
 | ||
| 						this.reset()
 | ||
| 						// uni.showToast({
 | ||
| 						// 	title: "支付成功",
 | ||
| 						// 	icon: "success"
 | ||
| 						// })
 | ||
| 
 | ||
| 						uni.navigateTo({
 | ||
| 							url: "/pagesHome/PaymentResults/PaymentResults?orderNo=" + this.orderNo
 | ||
| 						})
 | ||
| 					} else if (res.data.code == 2) {
 | ||
| 						uni.showToast({
 | ||
| 							title: "请先配置商户号",
 | ||
| 							icon: "none"
 | ||
| 						})
 | ||
| 					} else {
 | ||
| 						uni.showToast({
 | ||
| 							title: "支付失败,请联系管理员",
 | ||
| 							icon: "none"
 | ||
| 						})
 | ||
| 					}
 | ||
| 				})
 | ||
| 			},
 | ||
| 			// 重置
 | ||
| 			reset() {
 | ||
| 				this.userId = "";
 | ||
| 				this.userInfo = "";
 | ||
| 				this.AmountCollected = "";
 | ||
| 				this.DiscountAmount = 0;
 | ||
| 				this.balanceRedece = 0;
 | ||
| 				this.isOilStorageCard = false;
 | ||
| 				this.balanceRedece = 0;
 | ||
| 				this.authCode = "";
 | ||
| 				this.oilName = "";
 | ||
| 				this.tankId = "";
 | ||
| 				this.oilPrice = "";
 | ||
| 				this.oilCardAmount = 0;
 | ||
| 				this.paymentAmount = 0;
 | ||
| 				this.levelAmount = 0;
 | ||
| 				this.activeAmount = 0;
 | ||
| 				this.getOilGun()
 | ||
| 			},
 | ||
| 			// 获取油枪信息
 | ||
| 			getOilGun() {
 | ||
| 				request({
 | ||
| 					url: 'business/petrolStationManagement/oilGun/queryOilGunList',
 | ||
| 					method: 'get',
 | ||
| 				}).then((res) => {
 | ||
| 					this.spearList = res.data
 | ||
| 					if (this.spearList.length > 0) {
 | ||
| 						this.oilGunNum = this.spearList[0].id
 | ||
| 						this.oilName = this.spearList[0].oilName
 | ||
| 						this.tankId = this.spearList[0].tankId
 | ||
| 						this.oilPrice = this.spearList[0].oilPrice
 | ||
| 					}
 | ||
| 				})
 | ||
| 			},
 | ||
| 			// 跳会员
 | ||
| 			gosearchVip() {
 | ||
| 				uni.navigateTo({
 | ||
| 					url: '/pagesHome/searchVip/searchVip?AmountCollected=' + this.AmountCollected
 | ||
| 				})
 | ||
| 			},
 | ||
| 			// 键盘方法
 | ||
| 			KeyboardLogic(data) {
 | ||
| 				// console.log(data);
 | ||
| 				if (data.type == 'num') {
 | ||
| 					this.AmountCollected = this.AmountCollected + data.value
 | ||
| 					if (!this.userInfo) this.paymentAmount = this.AmountCollected
 | ||
| 					this.getPaymentPreferential()
 | ||
| 				}
 | ||
| 				if (data.type == 'img') {
 | ||
| 					if (!data.value) {
 | ||
| 						this.AmountCollected = this.AmountCollected.substring(0, this.AmountCollected.length - 1);
 | ||
| 					}
 | ||
| 					// if (data.value == 'skzf') {
 | ||
| 					// 	uni.navigateTo({
 | ||
| 					// 		url: '/pagesHome/CardPayment/CardPayment'
 | ||
| 					// 	})
 | ||
| 
 | ||
| 					// }
 | ||
| 				}
 | ||
| 
 | ||
| 			},
 | ||
| 			getoilIndex(num) {
 | ||
| 				this.oilIndex = num
 | ||
| 			},
 | ||
| 			getspearIndex(num, data) {
 | ||
| 				this.spearIndex = num
 | ||
| 				this.oilGunNum = data.id
 | ||
| 				this.oilName = data.oilName
 | ||
| 				this.tankId = data.tankId
 | ||
| 				this.oilPrice = data.oilPrice
 | ||
| 				this.getPaymentPreferential()
 | ||
| 			},
 | ||
| 			goback() {
 | ||
| 				uni.navigateBack()
 | ||
| 			}
 | ||
| 		}
 | ||
| 	}
 | ||
| </script>
 | ||
| 
 | ||
| <style scoped lang="scss">
 | ||
| 	.content {
 | ||
| 		background: #0864e9;
 | ||
| 		// background: linear-gradient(180deg, #B2D2FC 0%, #B2D2FC 14%, rgba(255, 255, 255, 0.84) 24%, rgba(255, 255, 255, 0.84) 100%);
 | ||
| 		height: 100vh;
 | ||
| 	}
 | ||
| 
 | ||
| 	.container {
 | ||
| 		width: 100%;
 | ||
| 		background: #0864e9;
 | ||
| 		box-sizing: border-box;
 | ||
| 		padding-top: 88px;
 | ||
| 	}
 | ||
| 
 | ||
| 	.input-box {
 | ||
| 		width: 95%;
 | ||
| 		margin: 10px auto;
 | ||
| 		border-bottom: 1px solid #fff;
 | ||
| 		box-sizing: border-box;
 | ||
| 		padding: 10px 0px;
 | ||
| 		font-size: 20px;
 | ||
| 		font-weight: bold;
 | ||
| 		color: #fff;
 | ||
| 		display: flex;
 | ||
| 		align-items: center;
 | ||
| 	}
 | ||
| 
 | ||
| 	.title_ {
 | ||
| 		font-weight: bold;
 | ||
| 		font-size: 16px;
 | ||
| 		color: #FFFFFF;
 | ||
| 		width: 95%;
 | ||
| 		margin: 10px auto;
 | ||
| 	}
 | ||
| 
 | ||
| 	.warp-box {
 | ||
| 		width: 95%;
 | ||
| 		margin: 10px auto;
 | ||
| 		display: flex;
 | ||
| 		align-items: center;
 | ||
| 		flex-wrap: wrap;
 | ||
| 	}
 | ||
| 
 | ||
| 	.w-box {
 | ||
| 		width: 60px;
 | ||
| 		height: 32px;
 | ||
| 		background: #FFFFFF;
 | ||
| 		border-radius: 6px 6px 6px 6px;
 | ||
| 		display: flex;
 | ||
| 		align-items: center;
 | ||
| 		justify-content: center;
 | ||
| 		font-weight: 500;
 | ||
| 		font-size: 14px;
 | ||
| 		color: #333333;
 | ||
| 		margin-right: 10px;
 | ||
| 	}
 | ||
| 
 | ||
| 	.acv {
 | ||
| 		background: #E8F5FF !important;
 | ||
| 		color: #0864E9 !important;
 | ||
| 	}
 | ||
| 
 | ||
| 	.s-h-box {
 | ||
| 		width: 100%;
 | ||
| 		border-top: 1px solid #E8E8E8;
 | ||
| 		display: flex;
 | ||
| 		align-items: center;
 | ||
| 		justify-content: space-between;
 | ||
| 	}
 | ||
| 
 | ||
| 	.bai-kuang {
 | ||
| 		width: 100%;
 | ||
| 		position: fixed;
 | ||
| 		bottom: 0px;
 | ||
| 		left: 0px;
 | ||
| 		background: #fff;
 | ||
| 		border-radius: 18px 18px 0px 0px;
 | ||
| 		overflow: hidden;
 | ||
| 	}
 | ||
| 
 | ||
| 	.num-box {
 | ||
| 		width: 100%;
 | ||
| 		display: flex;
 | ||
| 		flex-wrap: wrap;
 | ||
| 		justify-content: space-between;
 | ||
| 	}
 | ||
| 
 | ||
| 	.k-box {
 | ||
| 		width: 24.5%;
 | ||
| 		height: 80px;
 | ||
| 		display: flex;
 | ||
| 		align-items: center;
 | ||
| 		justify-content: center;
 | ||
| 
 | ||
| 		border-right: 1px solid #E8E8E8;
 | ||
| 		border-top: 1px solid #E8E8E8;
 | ||
| 	}
 | ||
| 
 | ||
| 	.CentralLogic {
 | ||
| 		font-weight: bold;
 | ||
| 		font-size: 30px;
 | ||
| 		color: #333333;
 | ||
| 	}
 | ||
| 
 | ||
| 	.Centralimg {}
 | ||
| 
 | ||
| 	.icon-box {
 | ||
| 		width: 40px;
 | ||
| 		height: 40px;
 | ||
| 		margin: 5px auto;
 | ||
| 
 | ||
| 		image {
 | ||
| 			width: 100%;
 | ||
| 			height: 100%;
 | ||
| 		}
 | ||
| 	}
 | ||
| 
 | ||
| 	.icon-size {
 | ||
| 		font-size: 14px;
 | ||
| 		color: #333333;
 | ||
| 		text-align: center;
 | ||
| 
 | ||
| 
 | ||
| 	}
 | ||
| 
 | ||
| 	.kuang-top {
 | ||
| 		width: 100%;
 | ||
| 		display: flex;
 | ||
| 		align-items: center;
 | ||
| 		justify-content: space-between;
 | ||
| 
 | ||
| 	}
 | ||
| 
 | ||
| 	.w-shi {
 | ||
| 		width: 50%;
 | ||
| 		display: flex;
 | ||
| 		align-items: center;
 | ||
| 		justify-content: center;
 | ||
| 		color: #0864E9;
 | ||
| 		box-sizing: border-box;
 | ||
| 		padding: 15px;
 | ||
| 	}
 | ||
| 
 | ||
| 	.bottom_box {
 | ||
| 		width: 100%;
 | ||
| 		background: #fff;
 | ||
| 		box-sizing: border-box;
 | ||
| 		padding: 15px;
 | ||
| 		border-radius: 10px 10px 0px 0px;
 | ||
| 
 | ||
| 	}
 | ||
| 
 | ||
| 	.anniuq {
 | ||
| 		width: 100px;
 | ||
| 		height: 35px;
 | ||
| 		background: #0864E9;
 | ||
| 		display: flex;
 | ||
| 		align-items: center;
 | ||
| 		justify-content: center;
 | ||
| 		color: #fff;
 | ||
| 		border-radius: 50px;
 | ||
| 	}
 | ||
| 
 | ||
| 	.anniux {
 | ||
| 		width: 100px;
 | ||
| 		height: 35px;
 | ||
| 		background: #FD504E;
 | ||
| 		display: flex;
 | ||
| 		align-items: center;
 | ||
| 		justify-content: center;
 | ||
| 		color: #fff;
 | ||
| 		border-radius: 50px;
 | ||
| 	}
 | ||
| </style> |