oil-station/pos-uni/pagesHome/Collection/Collection.vue
2024-06-11 14:21:09 +08:00

741 lines
18 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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