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