Skip to content

K
komatsu-lease-app
Commit 5dca4969 authored by 14699's avatar 14699
Browse files
Options

合并支付和支付账单需求

parent 931921fd
Hide whitespace changes
Inline Side-by-side
Showing with 497 additions and 7 deletions
package.json
View file @ 5dca4969
...@@ -30,7 +30,9 @@ ...@@ -30,7 +30,9 @@
"build:homeMessage:test": "set VITE_TARGET=homeMessage&& vite build --mode test", "build:homeMessage:test": "set VITE_TARGET=homeMessage&& vite build --mode test",
"build:homeMessage:production": "set VITE_TARGET=homeMessage&& vite build --mode production", "build:homeMessage:production": "set VITE_TARGET=homeMessage&& vite build --mode production",
"build:paymentProtocol:test": "set VITE_TARGET=paymentProtocol&& vite build --mode test", "build:paymentProtocol:test": "set VITE_TARGET=paymentProtocol&& vite build --mode test",
"build:paymentProtocol:production": "set VITE_TARGET=paymentProtocol&& vite build --mode production" "build:paymentProtocol:production": "set VITE_TARGET=paymentProtocol&& vite build --mode production",
"build:billPay:test": "set VITE_TARGET=billPay&& vite build --mode test",
"build:billPay:production": "set VITE_TARGET=billPay&& vite build --mode production"
}, },
"dependencies": { "dependencies": {
"@hips/plugin-vue-jssdk": "^1.1.2", "@hips/plugin-vue-jssdk": "^1.1.2",
......
src/App.vue
View file @ 5dca4969
...@@ -43,7 +43,7 @@ export default { ...@@ -43,7 +43,7 @@ export default {
async getBusinessToken(jumpRouter) { async getBusinessToken(jumpRouter) {
if (import.meta.env.VITE_LOCAL == 'true') { if (import.meta.env.VITE_LOCAL == 'true') {
window.localStorage.setItem('userId', 5) //5 window.localStorage.setItem('userId', 5) //5
window.localStorage.setItem('phone', "18762670654") //17864386578 ; 18762670654 window.localStorage.setItem('phone', "15207142614") //17864386578 ; 18762670654
} }
const baseURL = import.meta.env.VITE_LOCAL== 'true' ? '/api' : import.meta.env.VITE_HTTP_BASE_URL const baseURL = import.meta.env.VITE_LOCAL== 'true' ? '/api' : import.meta.env.VITE_HTTP_BASE_URL
let res = await post(`${baseURL}/app/api/app/user/token/get`, { let res = await post(`${baseURL}/app/api/app/user/token/get`, {
......
src/modules/billPay/api/index.js 0 → 100644
View file @ 5dca4969
import { post } from '@/utils/http'
const baseURL = import.meta.env.VITE_LOCAL== 'true' ? '/api' : import.meta.env.VITE_HTTP_BASE_URL
const api = {
// 首页查询
getBillList(data = {}) {
return post(`${baseURL}/app/api/billList`, data)
},
};
export default api;
src/modules/billPay/store/index.js 0 → 100644
View file @ 5dca4969
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
export const usePlan = defineStore('plan', () => {
const payList = ref([])
return { payList }
})
src/modules/billPay/views/detail.vue 0 → 100644
View file @ 5dca4969
<template>
<div class="container">
<NavBar title="核销明细" left-arrow @click-left="backLast" />
<div class="list" v-if="list.length > 0">
<div class="item" v-for="(item,index) in list">
<div class="item-title strong">
支付金额
</div>
<div class="item-value strong">
{{-currency(item.writeOffDueAmount)}}
</div>
<div class="item-content" v-for="cItem in columnsList">
<div class="item-content-title">
{{cItem.text}}
</div>
<div class="item-content-value">
{{item[cItem.value]??''}}
</div>
</div>
</div>
</div>
<div class="hint" v-else>
<div class="detail">暂无相关核销明细，如有疑问请联系业务人员！</div>
</div>
</div>
</template>
<script setup>
import { goBack } from "@/utils/globalFun"
import { NavBar, Button, Toast } from "vant";
import { useRouter } from "vue-router";
import moment from 'moment'
import { usePlan } from '../store/index'
import { ref } from "vue";
import { currency } from '@/utils/textFormat'
const planStore = usePlan();
const router = useRouter();
const columnsList = ref([{
text:'支付时间',
value: 'writeOffDate',
},{
text:'客户',
value: 'bpName',
},{
text:'项目编号',
value: 'contractNumber',
},{
text:'支付款项',
value: 'payItem',
},{
text:'机型',
value: 'model',
},{
text:'机号',
value: 'machineNumber',
},])
const list = planStore.payList
const backLast = () => {
planStore.planData = {}
goBack()
}
</script>
<style lang="less" scoped>
.container {
height: 100%;
}
.list{
box-sizing: border-box;
height: calc(100vh - 50px);
overflow-y: auto;
margin-bottom: 20px;
}
.item {
display: flex;
box-sizing: border-box;
width: 90%;
margin: 20px auto;
flex-direction: column;
background-color: #fff;
border-radius: 10px;
padding: 20px;
font-size: 14px;
}
.item-title {
width: 100%;
height: 30px;
text-align: center;
line-height: 30px;
}
.item-value {
width: 100%;
height: 30px;
text-align: center;
line-height: 30px;
font-weight: 600;
}
.item-content {
display: flex;
width: 100%;
height: 30px;
align-items: center;
}
.item-content-title {
flex:1
}
.item-content-value {
flex:2
}
.hint {
box-sizing: border-box;
width: 95%;
margin: 5px auto 10px;
padding: 6px 7px;
margin-top: 5%;
}
.detail {
box-sizing: border-box;
width: 100%;
text-align: center;
color: gray;
line-height: 20px;
}
.strong {
font-size: 16px;
font-weight: 600;
}
</style>
src/modules/billPay/views/index.vue 0 → 100644
View file @ 5dca4969
<template>
<div class="container">
<NavBar title="支付账单" left-arrow @click-left="goBack(true)" />
<div class="button-content" @click="showPickerPopup">
{{curPayText}}
</div>
<div class="list" v-if="payList.length > 0">
<div class="item" v-for="(item,index) in payList">
<div class="item-content">
<div class="item-content-title" @click="clickMonth">
{{item.yearMonth}}<Icon name="arrow-down" />
</div>
<div class="item-content-value">
支出合计: {{currency(item.billTotalAmount)}}
</div>
</div>
<div class="van-cell-group" v-for="cellItem in item.billMonthDetailList">
<div class="item-cell" @click="jump(cellItem)">
<div class="item-cell-title">{{cellItem.paySourceDesc}}</div>
<div class="item-cell-date">
{{cellItem.payTime}}
</div>
<div class="item-cell-value">
{{-currency(cellItem.payAmount)}}
</div>
</div>
</div>
</div>
</div>
<div class="hint" v-else>
<div class="detail">近期内无相关支付数据，查看更多请<lable @click="clickMonth">选择时间</lable></div>
</div>
</div>
<Popup v-model:show="showPicker" round position="bottom">
<div class="popup-content">
<div class="picker-header">全部账单筛选</div>
<div class="picker-title">交易类型</div>
<div class="picker-content">
<div class="picker-content-item" :class="[item.checked?'item-checked': '']" v-for="(item,index) in pickerList" @click="clickItem(item,index)">{{item.text}}</div>
</div>
<div class="picker-content-bottom">
<Button type="default" class="cancel" @click="canclePopup">取消</Button>
<Button type="success" @click="confirmPopup">确认</Button>
</div>
</div>
</Popup>
<Popup v-model:show="typeShowDate" @close="canclePopup" position="bottom">
<DatetimePicker v-model="currentDate" type="year-month" :max-date="maxDate"
title="选择年月" @confirm="typeOnConfirm($event)"
@cancel="canclePopup" />
</Popup>
</template>
<script setup>
import { goBack } from "@/utils/globalFun"
import { NavBar, Icon, Popup, Button, DatetimePicker} from "vant";
import api from "../api";
import { useRouter } from "vue-router";
import { usePlan } from '../store/index'
import { currency } from '@/utils/textFormat'
import {ref} from "vue";
import moment from 'moment'
const router = useRouter();
const planStore = usePlan()
let showPicker = ref(false)
let pickerList = ref([
{
text:'全部',
value:null,
checked: true
},
{
text:'APP',
value:'APP',
checked: false
},
{
text:'小程序',
value:'WECHAT_APPLET',
checked: false
}
])
let curPayText = ref('全部')
let curPayTextValue = null
let typeShowDate = ref(false)
const currentDate = ref(new Date())
const maxDate = ref(new Date())
let curYear = null
let curMonth = null
let payList = $ref([])
const getList = async () => {
let param = {
paySource: curPayTextValue,
year: curYear,
month: curMonth
}
let res = await api.getBillList({userId: window.localStorage.getItem('userId'),...param});
if(res.success){
payList = res.rows.sort((a, b) => moment(b.yearMonth).unix() - moment(a.yearMonth).unix())
}
else {
payList = []
}
};
getList();
const showPickerPopup = () => {
pickerList.value = pickerList.value.map(item=>{
item.checked = curPayText.value === item.text ? true : false
return item
})
showPicker.value = true
}
const clickItem = (curItem,index) => {
pickerList.value = pickerList.value.map(item=>{
item.checked = curItem.text === item.text ? true : false
return item
})
}
const canclePopup = () => {
showPicker.value = false
typeShowDate.value = false
}
const confirmPopup = () => {
let item = pickerList.value.filter(item => item.checked)
curPayText.value = item[0].text
curPayTextValue = item[0].value
showPicker.value = false
getList()
}
const clickMonth = () => {
typeShowDate.value = true
}
function typeOnConfirm(value) {
curYear = moment(value).format('YYYY');
curMonth = moment(value).format('MM');
typeShowDate.value = false
getList()
}
const jump = (item) => {
planStore.payList = item.writeOffDetailList
router.push({ name: 'billPay-views-detail'})
}
</script>
<style scoped lang="less">
.container {
height: 100%;
}
.list{
box-sizing: border-box;
height: calc(100vh - 100px);
overflow-y: auto;
margin-bottom: 20px;
}
.button-content {
display: flex;
width: 80px;
height: 30px;
font-size: 13px;
align-items: center;
text-align: center;
margin: 10px;
border-radius: 10px;
background-color: rgba(215, 215, 215, 1);
//color: #fff;
justify-content: center;
}
.item-content {
display: flex;
height: 40px;
align-items: center;
padding: 10px;
}
.item-content-title {
display: flex;
flex:1;
height: 100%;
align-items: center;
}
.item-content-value {
flex:1;
text-align: right;
}
.item-cell {
position: relative;
display: flex;
box-sizing: border-box;
width: 100%;
padding: 10px;
overflow: hidden;
color: #323233;
font-size: 14px;
line-height: 50px;
background: #fff;
border-bottom: 1px solid #ebedf0;
}
.item-cell-title {
width: 50px;
height: 50px;
border-radius: 50%;
color: #fff;
background-color: rgb(47, 122, 217);
font-size: 12px;
margin-right: 10px;
align-items: center;
text-align: center;
}
.item-cell-date {
padding-left: 10px;
}
.item-cell-value {
flex: 1;
position: relative;
overflow: hidden;
text-align: right;
vertical-align: middle;
word-wrap: break-word;
font-weight: bold;
}
.van-cell-group{
background: #fff;
}
.van-cell__label {
font-size: 14px;
line-height: 14px;
}
.bottomText{
text-align: center;
color: gray;
}
.popup-content {
padding: 20px;
height: 200px;
}
.picker-header {
height: 40px;
font-size: 14px;
font-weight: 600;
line-height: 40px;
}
.picker-title {
height: 40px;
font-size: 14px;
line-height: 40px;
}
.picker-content {
display: flex;
justify-content: space-around;
}
.picker-content-item {
display: flex;
width: 100px;
height: 40px;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: rgba(242, 242, 242, 1);
}
.item-checked {
background-color: rgba(2, 193, 96, 0.27450980392156865);
color: #02C160;
}
.picker-content-bottom {
display: flex;
justify-content: space-around;
margin-top: 20px;
}
.picker-content-bottom button{
width: 100px;
border-radius: 10px;
}
.cancel {
background-color: rgba(242, 242, 242, 1);
}
.hint {
box-sizing: border-box;
width: 95%;
margin: 5px auto 10px;
padding: 6px 7px;
margin-top: 5%;
}
.detail {
box-sizing: border-box;
width: 100%;
text-align: center;
color: gray;
line-height: 20px;
}
.detail lable {
color: rgb(47, 122, 217);
}
</style>
<route>
{
meta: {
title: '支付账单'
}
}
</route>
src/modules/makeRepayment/components/Pay.vue
View file @ 5dca4969
...@@ -134,7 +134,6 @@ const miniprogramId = import.meta.env.VITE_MiniprogramId; ...@@ -134,7 +134,6 @@ const miniprogramId = import.meta.env.VITE_MiniprogramId;
const miniprogramType = +import.meta.env.VITE_MiniprogramType; const miniprogramType = +import.meta.env.VITE_MiniprogramType;
watchEffect(() => { watchEffect(() => {
debugger
payAmount.value = props.payInfoObj.payAmount payAmount.value = props.payInfoObj.payAmount
orderAmount.value = props.payInfoObj.payAmount orderAmount.value = props.payInfoObj.payAmount
// 合并支付不支持 部分支付 // 合并支付不支持 部分支付
......
src/modules/makeRepayment/views/plan.vue
View file @ 5dca4969
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
<Pay :visible="showModal" :payInfoObj="payInfo" @paySuccess="paySuccessFunction" @payFail="payFailFunction" @closePage="handleColse" @wechatPayCallBack="wechatPayFunction"/> <Pay :visible="showModal" :payInfoObj="payInfo" @paySuccess="paySuccessFunction" @payFail="payFailFunction" @closePage="handleColse" @wechatPayCallBack="wechatPayFunction"/>
</template> </template>
<template #footer> <template #footer>
<Notice detail="单选支持金额修改，多选不支持金额修改" /> <Notice detail="点击确认支付后，单选支持金额修改，多选不支持金额修改" />
<div class="pay-button-content"> <div class="pay-button-content">
<Checkbox v-model="allCheckFlag" icon-size="30px" @click="checkAll()">全选</Checkbox> <Checkbox v-model="allCheckFlag" icon-size="30px" @click="checkAll()">全选</Checkbox>
<div class="pay-button-item"> <div class="pay-button-item">
...@@ -415,7 +415,7 @@ const goPay = () => { ...@@ -415,7 +415,7 @@ const goPay = () => {
.left-item { .left-item {
flex: 1 0 30%; flex: 1 0 35%;
span:nth-child(1) { span:nth-child(1) {
font-weight: 600; font-weight: 600;
...@@ -429,7 +429,7 @@ const goPay = () => { ...@@ -429,7 +429,7 @@ const goPay = () => {
.center-item { .center-item {
flex: 1 0 45%; flex: 1 0 40%;
p { p {
color: gray; color: gray;
...@@ -526,7 +526,7 @@ const goPay = () => { ...@@ -526,7 +526,7 @@ const goPay = () => {
} }
:deep(.plan-list){ :deep(.plan-list){
height: calc(100% - 130px); height: calc(100% - 150px);
} }
:deep(.hint) { :deep(.hint) {
width: 100%; width: 100%;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment