billHistoryDetail.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469
  1. <template>
  2. <view class="content flex flex_column" v-if="billInfo">
  3. <view class="b_head">
  4. <view class="head_list">
  5. <text>分享时间</text>
  6. <text>{{ billInfo.createDate }}</text>
  7. </view>
  8. <view class="head_list" v-if="billInfo.customer">
  9. <text>客户名称</text>
  10. <text>{{ billInfo.customer.customerName }}</text>
  11. </view>
  12. <!-- <view class="head_list">
  13. <text>对账周期</text>
  14. <text>{{ timeInfo || '--' }}</text>
  15. </view> -->
  16. <view class="head_list">
  17. <text>付款状态</text>
  18. <text>{{ billInfo.billStatus == 'UNSETTLE' ? '未付款' : billInfo.settleStyleSnDictValue ? '已结清(' + billInfo.settleStyleSnDictValue + ')' : '已结清' }}</text>
  19. </view>
  20. </view>
  21. <view class="b_detail">
  22. <view class="detail_list u-flex">
  23. <view class="detail_box">
  24. <text>总单数:</text>
  25. <text>{{ billInfo.detailNum }}</text>
  26. </view>
  27. <view class="detail_box">
  28. <text>待收金额合计:</text>
  29. <text>¥{{ billInfo.totalAmount ||billInfo.totalAmount == 0 ? toThousands(billInfo.totalAmount,2):'--' }}</text>
  30. </view>
  31. </view>
  32. <view class="detail_list u-flex">
  33. <view class="detail_box">
  34. <text>折让金额:</text>
  35. <text>¥{{ billInfo.discountAmount||billInfo.discountAmount==0? toThousands(billInfo.discountAmount,2):'--'}}</text>
  36. </view>
  37. <view class="detail_box">
  38. <text>折让后待收金额:</text>
  39. <text>¥{{ billInfo.settleAmount||billInfo.settleAmount ==0? toThousands(billInfo.settleAmount,2):'--' }}</text>
  40. </view>
  41. </view>
  42. <view class="detail_list u-flex" v-if="billInfo.billStatus != 'UNSETTLE'">
  43. <view class="detail_box">
  44. <text>实际折让金额:</text>
  45. <text>¥{{ billInfo.discountAmount||billInfo.discountAmount==0? toThousands(billInfo.discountAmount,2):'--'}}</text>
  46. </view>
  47. <view class="detail_box">
  48. <text>实际收款金额:</text>
  49. <text>¥{{ billInfo.settleAmount||billInfo.settleAmount ==0? toThousands(billInfo.settleAmount,2):'--' }}</text>
  50. </view>
  51. </view>
  52. </view>
  53. <view class="detail_con"><billList ref="billBox" :list="billArr"></billList></view>
  54. <view class="footer flex align_center" v-if="billInfo.billStatus == 'UNSETTLE'">
  55. <navigator style="flex:1;" :url="'/pages/sales/billHistoryEdit?billId=' + verifySn" hover-class="none">
  56. <view style="color:#00aaff;">编辑</view>
  57. </navigator>
  58. <view class="flex" style="width: 78%;">
  59. <u-button type="warning" shape="circle" @click="openPaymentModal">确认收款</u-button>
  60. <u-button type="primary" shape="circle" :loading="btnLoading" @click="submitOrder" :custom-style="customStyle">再次发送对账单</u-button>
  61. </view>
  62. </view>
  63. <view class="footer" v-else>
  64. <u-button type="primary" shape="circle" :loading="btnLoading" @click="submitOrder" :custom-style="customStyle">再次发送对账单</u-button>
  65. </view>
  66. <!-- 确认收款弹窗 -->
  67. <u-popup v-model="showPayment" mode="center" :border-radius="20" width="82%">
  68. <view class="slot-content">
  69. <view style="padding:50rpx 40rpx 20rpx;">
  70. <u-form :model="form" ref="uForm" :label-width="150" :rules="rules" :label-style="{color:'#999'}">
  71. <u-form-item :border-bottom ="false" label="总单数:" prop="num" v-if="billArr">{{billArr.length}}</u-form-item>
  72. <u-form-item :border-bottom ="false" label="结算方式:" prop="settleTypeName">
  73. <u-input type="text" placeholder="请选择结算方式" :disabled="true" :height="60" v-model="form.settleTypeName" @click="settleShow = true"/>
  74. <u-icon :name="settleShow?'arrow-right':'arrow-down'" color="#e0e0e0" size="26"></u-icon>
  75. </u-form-item>
  76. <u-form-item v-if="enableFundAccount" :border-bottom ="false" label="结算账户:" prop="settleAccountName">
  77. <u-input type="text" placeholder="请选择结算账户" :disabled="true" :height="60" v-model="form.settleAccountName" @click="openSettleAccount"/>
  78. <u-icon :name="settleAccount?'arrow-right':'arrow-down'" color="#e0e0e0" size="26"></u-icon>
  79. </u-form-item>
  80. <u-form-item :border-bottom ="false" label="待收金额:" prop="num">¥{{ billInfo.totalAmount ||billInfo.totalAmount == 0 ? toThousands(billInfo.totalAmount,2):'--' }}</u-form-item>
  81. <u-form-item :border-bottom ="false" label="折让金额:" prop="discountAmount"><u-input type="number" placeholder="请输入实际收款金额(最多2位小数)" :border="true" :height="60" v-model="form.discountAmount"/></u-form-item>
  82. </u-form>
  83. </view>
  84. <view class="costText">折让后金额</view>
  85. <view class="costText1">¥{{settlement<0?0:settlement}}</view>
  86. <view class="paymentFooter flex algin-center">
  87. <view @click="closePopup">取消</view>
  88. <view @click="handlePay">确定</view>
  89. </view>
  90. </view>
  91. </u-popup>
  92. <!-- 提示弹窗 -->
  93. <u-modal v-model="showModal" confirm-text="知道了" :content="modalContent" :show-title="false"></u-modal>
  94. <u-picker mode="selector" v-model="settleShow" @confirm="confirmSettle" :default-selector="[0]" :range="settleList" range-key="dispName"></u-picker>
  95. <u-picker mode="selector" v-model="settleAccount" @confirm="confirmSettleAccount" :default-selector="[0]" :range="accountList" range-key="name"></u-picker>
  96. <!-- 分享询问弹窗 -->
  97. <u-modal v-model="shareShow" :show-cancel-button="true" :content="shareContent" @confirm="handleShare" @cancel="shareShow = false;btnLoading = false;"></u-modal>
  98. </view>
  99. </template>
  100. <script>
  101. import billList from './billListComponent.vue';
  102. import { findBySn, insert,settleVerify,settle } from '@/api/verify.js';
  103. import getDate from '@/libs/getDate.js';
  104. import { toThousands } from '@/libs/tools.js'
  105. import { getLookUpDatas } from '@/api/data';
  106. import { queryFunctionState,settleAccountList } from '@/api/user';
  107. export default {
  108. components: { billList },
  109. data() {
  110. return {
  111. customStyle: {
  112. backgroundColor: this.$config('primaryColor'),
  113. color: '#fff'
  114. },
  115. verifySn: '',
  116. billInfo: null,
  117. billArr: [],
  118. timeInfo: '',
  119. btnLoading: false,
  120. shareShow: false,
  121. isShowEdit:false,//编辑
  122. settleShow:false,//结算方式
  123. shareContent: `是否同意发送对账单给微信好友?`,
  124. toThousands,
  125. showPayment:false,
  126. form:{
  127. receiptAmount:0,
  128. discountAmount:undefined,
  129. settleType:'',
  130. settleTypeName:'',
  131. settleAccountSn:'',
  132. settleAccountName:''
  133. },
  134. settleList:[],
  135. rules: {
  136. settleTypeName: [
  137. {
  138. required: true,
  139. message: '请选择结算方式',
  140. trigger: 'change',
  141. }
  142. ],
  143. settleAccountName:[
  144. {
  145. required: true,
  146. message: '请选择结算账户',
  147. trigger: 'change',
  148. }
  149. ]
  150. },
  151. showModal:false,
  152. modalContent:'',
  153. enableFundAccount:false,
  154. accountList:[],//结算账户列表
  155. settleAccount:false
  156. };
  157. },
  158. onReady() {
  159. uni.setNavigationBarColor({
  160. frontColor: '#ffffff',
  161. backgroundColor: this.$config('primaryColor')
  162. });
  163. },
  164. onLoad(options) {
  165. if (options && options.billId) {
  166. this.verifySn = options.billId;
  167. this.loadData({ verifySn: options.billId });
  168. }
  169. },
  170. computed: {
  171. //经销商信息
  172. userData() {
  173. return this.$store.state.vuex_userData;
  174. },
  175. settlement() {
  176. let totalPrice=this.billInfo.totalAmount?this.billInfo.totalAmount:0;
  177. let discountPrice=this.form.discountAmount?this.form.discountAmount:0
  178. let priceNum=totalPrice - discountPrice;
  179. const ret = priceNum.toFixed(2)
  180. let endPay=Number(totalPrice)>=Number(discountPrice) ? ret : 0
  181. this.form.receiptAmount = endPay
  182. return endPay
  183. }
  184. },
  185. methods: {
  186. loadData(ajaxData) {
  187. let that = this;
  188. findBySn(ajaxData).then(res => {
  189. if (res.status == 200) {
  190. that.billInfo = res.data;
  191. that.billArr = res.data.detailList;
  192. let timeobj = getDate.editDay(res.data.bizBeginDate, res.data.bizEndDate);
  193. that.timeInfo = timeobj.starttime + '~' + timeobj.endtime;
  194. that.$nextTick(() => {
  195. that.$refs.billBox.setData(res.data.detailList);
  196. });
  197. }
  198. });
  199. },
  200. // 关闭弹窗
  201. closePopup(){
  202. this.form={
  203. receiptAmount:0,
  204. discountAmount:undefined,
  205. settleType:'',
  206. settleTypeName:'',
  207. settleAccountSn:'',
  208. settleAccountName:''
  209. }
  210. this.showPayment = false
  211. },
  212. // 打开确认收款弹窗
  213. openPaymentModal(){
  214. let _this=this
  215. // 校验弹窗是否需要打开
  216. settleVerify({ verifySn: _this.verifySn}).then(res => {
  217. if (res.status == 200) {
  218. if(!res.data.falg){
  219. _this.modalContent = res.data.message
  220. _this.$nextTick(()=>{
  221. _this.showModal = true
  222. })
  223. }else{
  224. // 判断是否显示结算类型
  225. queryFunctionState().then(res => {
  226. if (res.status == 200) {
  227. _this.enableFundAccount = res.data.functionEnableFlag == 1
  228. }
  229. })
  230. // if(this.$hasPermissions('M_fundAccountList')&&this.$hasPermissions('B_fundAccountEnable')){
  231. // queryFunctionState().then(res => {
  232. // if (res.status == 200) {
  233. // _this.enableFundAccount = res.data.functionEnableFlag == 1
  234. // }
  235. // })
  236. // }
  237. _this.getPayType();
  238. _this.showPayment = true
  239. _this.$nextTick(()=>{
  240. _this.$refs.uForm.setRules(_this.rules);
  241. })
  242. }
  243. }
  244. });
  245. },
  246. //获取结算类型列表
  247. getPayType(){
  248. getLookUpDatas({
  249. lookupCode: 'SETTLE_STYLE',
  250. pageNo: 1,
  251. pageSize: 1000
  252. }).then(result => {
  253. if (result && result.status == 200) {
  254. this.settleList = result.data.list;
  255. }
  256. });
  257. },
  258. //获取结算账户
  259. getPayAccount(typeCode){
  260. settleAccountList({settleStyleSn: typeCode,pageNo:1,pageSize:500,state:'ENABLE'}).then(result => {
  261. if (result && result.status == 200) {
  262. result.data.list.forEach(item=>{
  263. item.name = item.accountName+'-'+item.accountNo
  264. })
  265. this.accountList = result.data.list;
  266. }
  267. });
  268. },
  269. //结算类型 确定
  270. confirmSettle(e){
  271. let pos=e[0]
  272. this.form.settleType = this.settleList[pos].code
  273. this.form.settleTypeName = this.settleList[pos].dispName
  274. if(this.enableFundAccount){
  275. this.form.settleAccountSn=''
  276. this.form.settleAccountName=''
  277. this.getPayAccount(this.settleList[pos].code)
  278. }
  279. },
  280. submitOrder() {
  281. //发送对账单
  282. this.shareShow = true;
  283. },
  284. //结算账户弹窗
  285. openSettleAccount(){
  286. if(!this.form.settleTypeName){
  287. uni.showToast({
  288. title:'请先选择结算类型',
  289. icon:'none'
  290. })
  291. return
  292. }
  293. this.settleAccount = true
  294. },
  295. //结算账户 确定
  296. confirmSettleAccount(e){
  297. let pos=e[0]
  298. this.form.settleAccountSn=this.accountList[pos].settleAccountSn
  299. this.form.settleAccountName=this.accountList[pos].name
  300. },
  301. //确认收款
  302. handlePay(){
  303. let _this=this
  304. _this.$refs.uForm.validate(valid => {
  305. if (valid) {
  306. let totalPrice=this.billInfo.totalAmount?this.billInfo.totalAmount:0;
  307. let discountPrice=this.form.discountAmount?this.form.discountAmount:0
  308. if (discountPrice > totalPrice) {
  309. uni.showToast({
  310. title: '折让金额不能大于待收金额,请重新输入',
  311. icon: 'none'
  312. });
  313. return;
  314. }
  315. let reg = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
  316. if(discountPrice && discountPrice!=0){
  317. if (!reg.test(discountPrice)) {
  318. uni.showToast({
  319. title: '折让金额格式不正确,请重新输入',
  320. icon: 'none'
  321. });
  322. return;
  323. }
  324. }
  325. let ajaxData=JSON.stringify(_this.form)
  326. let newAjaxData = JSON.parse(ajaxData)
  327. newAjaxData.verifySn = _this.verifySn
  328. delete newAjaxData.settleAccountName
  329. settle(newAjaxData).then(result => {
  330. if (result && result.status == 200) {
  331. _this.closePopup()
  332. _this.loadData({ verifySn: _this.verifySn });
  333. }
  334. });
  335. } else {
  336. console.log('验证失败');
  337. }
  338. });
  339. },
  340. // 分享图文
  341. handleShare() {
  342. let jumpUrl = getApp().globalData.baseUrl.replace('qpls-md/','')
  343. let url = jumpUrl+'dzd/index.html?' + this.userData.orgSn + '&' + this.verifySn;
  344. if (uni.getSystemInfoSync().platform == 'ios') {
  345. uni.share({
  346. provider: 'weixin',
  347. scene: 'WXSceneSession',
  348. type: 0,
  349. href: url,
  350. title: this.billInfo.customer.customerName + '的对账单',
  351. summary: '共' + this.billInfo.settleAmount + '元,请您查阅',
  352. imageUrl: '../../static/logo.png',
  353. success: function(res) {
  354. console.log('success:' + JSON.stringify(res));
  355. },
  356. fail: function(err) {
  357. console.log('fail:' + JSON.stringify(err));
  358. }
  359. });
  360. } else {
  361. uni.shareWithSystem({
  362. summary: this.billInfo.customer.customerName + '您好,您有一个对账单共' + this.billInfo.settleAmount + '元,请您查阅',
  363. href: url,
  364. success() {
  365. console.log('调取微信列表成功,分享不一定成功');
  366. },
  367. fail() {
  368. console.log('分享失败');
  369. }
  370. });
  371. }
  372. }
  373. }
  374. };
  375. </script>
  376. <style lang="scss" scoped>
  377. .content {
  378. height: 100vh;
  379. width: 100%;
  380. box-sizing: border-box;
  381. .b_head {
  382. background-color: #fff;
  383. .head_list {
  384. padding: 14rpx 20rpx;
  385. border-bottom: 1rpx solid #f8f8f8;
  386. text {
  387. &:first-child {
  388. color: $uni-text-color-grey;
  389. display: inline-block;
  390. width: 160rpx;
  391. }
  392. }
  393. }
  394. }
  395. .b_detail {
  396. margin: 6rpx 0;
  397. background-color: #fff;
  398. padding: 20rpx;
  399. box-sizing: border-box;
  400. .detail_list {
  401. margin-bottom: 10rpx;
  402. &:last-child {
  403. margin-bottom: 0rpx;
  404. }
  405. .detail_box::after {
  406. content: ';';
  407. color: $uni-text-color-grey;
  408. }
  409. .detail_box {
  410. text {
  411. &:first-child {
  412. color: $uni-text-color-grey;
  413. }
  414. &:last-child {
  415. color: $uni-color-warning;
  416. font-weight: 600;
  417. }
  418. }
  419. }
  420. }
  421. }
  422. .detail_con {
  423. flex-grow: 1;
  424. overflow: auto;
  425. background-color: #fff;
  426. }
  427. .footer {
  428. width: 100%;
  429. box-sizing: border-box;
  430. padding: 10rpx 20rpx;
  431. background: #fff;
  432. }
  433. }
  434. // 确认收款弹窗
  435. .slot-content{
  436. .u-form-item{
  437. line-height:0 !important;
  438. }
  439. .paymentFooter{
  440. border-top:1rpx solid #eee;
  441. view{
  442. width: 50%;
  443. text-align:center;
  444. padding:26rpx 0;
  445. }
  446. }
  447. .paymentFooter view:last-child{
  448. color:#007aff;
  449. border-left:1rpx solid #eee;
  450. }
  451. .costText {
  452. text-align: center;
  453. color: $uni-text-color-grey;
  454. font-size: 22rpx;
  455. }
  456. .costText1 {
  457. text-align: center;
  458. font-weight: bold;
  459. color: $uni-color-error;
  460. font-size: 36rpx;
  461. line-height: 60rpx;
  462. padding-bottom: 30rpx;
  463. }
  464. }
  465. </style>