合并支付和支付账单需求

package.json

@@ -30,7 +30,9 @@
     "build:homeMessage:test": "set VITE_TARGET=homeMessage&& vite build --mode test",
     "build:homeMessage:production": "set VITE_TARGET=homeMessage&& vite build --mode production",
     "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": {
     "@hips/plugin-vue-jssdk": "^1.1.2",

src/App.vue

@@ -43,7 +43,7 @@ export default {
     async getBusinessToken(jumpRouter) {
       if (import.meta.env.VITE_LOCAL == 'true') {
         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
       let res = await post(`${baseURL}/app/api/app/user/token/get`, {

src/modules/billPay/api/index.js

+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

+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

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

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

@@ -134,7 +134,6 @@ const miniprogramId = import.meta.env.VITE_MiniprogramId;
 const miniprogramType = +import.meta.env.VITE_MiniprogramType;
 
 watchEffect(() => {
-    debugger
   payAmount.value = props.payInfoObj.payAmount
   orderAmount.value = props.payInfoObj.payAmount
     // 合并支付不支持 部分支付

src/modules/makeRepayment/views/plan.vue

@@ -52,7 +52,7 @@
       <Pay :visible="showModal" :payInfoObj="payInfo"  @paySuccess="paySuccessFunction" @payFail="payFailFunction" @closePage="handleColse" @wechatPayCallBack="wechatPayFunction"/>
     </template>
     <template #footer>
-        <Notice detail="单选支持金额修改，多选不支持金额修改" />
+        <Notice detail="点击确认支付后，单选支持金额修改，多选不支持金额修改" />
         <div class="pay-button-content">
             <Checkbox v-model="allCheckFlag" icon-size="30px" @click="checkAll()">全选</Checkbox>
             <div class="pay-button-item">
@@ -415,7 +415,7 @@ const goPay = () => {
 
 
 .left-item {
-  flex: 1 0 30%;
+  flex: 1 0 35%;
 
   span:nth-child(1) {
     font-weight: 600;
@@ -429,7 +429,7 @@ const goPay = () => {
 
 
 .center-item {
-  flex: 1 0 45%;
+  flex: 1 0 40%;
 
   p {
     color: gray;
@@ -526,7 +526,7 @@ const goPay = () => {
 }
 
 :deep(.plan-list){
-  height: calc(100% - 130px);
+  height: calc(100% - 150px);
 }
 :deep(.hint) {
   width: 100%;