acceptorbind.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704
  1. <template>
  2. <view>
  3. <view class="headbgbox flex2">
  4. <view class="searchbox">
  5. <u-icon name="search" bold="true" size="25" color="rgb(246,185,78)"></u-icon>
  6. <input type="text" v-if="state==0" v-model="keywords" placeholder="请输入供应商名称" placeholder-style="color:#BBBCBE" @blur="changeSeach"/>
  7. <input type="text" v-if="state==1" v-model="keywords" placeholder="请输入承兑人名称" placeholder-style="color:#BBBCBE" @blur="changeSeach2"/>
  8. </view>
  9. <view class="screen" @click="show = true">
  10. <text>筛选</text>
  11. <view style="padding-left: 10rpx;">
  12. <u-icon name="arrow-down" color="#1F242A" size="14" bold="true"></u-icon>
  13. </view>
  14. </view>
  15. </view>
  16. <view class="acpcardlist">
  17. <view class="lable " v-for="(item,index) in listall" :key="index">
  18. <view class="radiobox" v-if="editall">
  19. <radio :value="index" :checked="item.checked" color="#D8AB5A" @click="checkBox(item.id)" />
  20. </view>
  21. <view class="acpcard" v-if="state==1" >
  22. <view class="allmsg">
  23. <view class="acpcont">
  24. <view class="acpname">
  25. <text>{{item.acceptorName}}</text>
  26. <view class="tag" v-if="item.statusText=='待审核'">待审核</view>
  27. <view class="tagdel" v-if="item.statusText=='失败'">失败</view>
  28. <view class="tagdel2" v-if="item.statusText=='失败'" @click="replayAcceptor(item.acceptorId)">重新提交</view>
  29. <view class="tagpass" v-if="item.statusText=='成功'">成功</view>
  30. </view>
  31. <view class="acpinfo " v-if="item.statusText=='失败'">
  32. <!-- <text class="pt">账号:{{item.bankAccount}}</text> -->
  33. <text class="pt">服务费率:%</text>
  34. <text class="pt">利率:%</text>
  35. </view>
  36. <view class="acpinfo " v-if="item.statusText=='成功'">
  37. <!-- <text class="pt">账号:{{item.bankAccount}}</text> -->
  38. <text class="pt">服务费率:{{item.serviceRate}}%</text>
  39. <text class="pt">利率:{{item.interest}}%</text>
  40. </view>
  41. <view class="acpinfo " v-if="item.statusText=='待审核'">
  42. <!-- <text class="pt">账号:{{item.bankAccount}}</text> -->
  43. <text class="pt">服务费率:%</text>
  44. <text class="pt">利率:%</text>
  45. </view>
  46. </view>
  47. </view>
  48. </view>
  49. <view class="acpcard" v-if="state==0" @click='acpDetail(item.id)'>
  50. <view class="allmsg">
  51. <view class="acpcont">
  52. <view class="acpname">
  53. <text>{{item.acceptorName}}</text>
  54. <view class="tag" v-if="item.statusText=='待审核'">待审核</view>
  55. <view class="tagdel" v-if="item.statusText=='失败'">失败</view>
  56. <view class="tagpass" v-if="item.statusText=='成功'">成功</view>
  57. </view>
  58. <view class="acpinfo ">
  59. <text class="pt">供应商名称:{{item.supplierName}}</text>
  60. <text class="pt">服务费率:{{item.serviceRate}}%</text>
  61. <text class="pt">利率:{{item.interest}}%</text>
  62. </view>
  63. </view>
  64. </view>
  65. </view>
  66. </view>
  67. </view>
  68. <view class="nomore" v-if="listall.length==0">
  69. <text>暂无数据</text>
  70. </view>
  71. <view class="totalmanage " v-if="listall.length>0">
  72. <text style="color:#68625B;font-size: 28rpx;">合计:{{total}}份</text>
  73. <view class=" maboxtitls" @click="editall=true">
  74. <view class="managebox">
  75. <image src="/static/img/manage.png" mode="aspectFit"></image>
  76. </view>
  77. <text style="padding-left: 15rpx;">管理</text>
  78. </view>
  79. </view>
  80. <view class="safebt"></view>
  81. <view class="plusicon" v-if="state==1" @click="addAcceptor"></view>
  82. <!-- 筛选功能 -->
  83. <u-popup :show="show" @close="close" @open="open">
  84. <view class="popscreen" style="height: 340rpx;">
  85. <view class="checklist" v-for="(item,index) in ctrstatus" :key="index">
  86. <view class="alllistbtn">
  87. <text class="btntitle" style="">{{item.title}}</text>
  88. <view class="yunbtn">
  89. <view class="btnchoose" v-for="(i,k) in item.list" :key="k" @click="choose(item.title,k)"
  90. :class="[contract_status == k?'active':'btnchoose']">
  91. <text>{{i.name}}</text>
  92. </view>
  93. </view>
  94. </view>
  95. </view>
  96. <view class="aszs flex6">
  97. <view class="againbtn" @click="restoreALL"><text>重置</text></view>
  98. <view class="againbtn" style="color: #D8AB5A;border: 1rpx solid #D8AB5A;" @click="makeSureSelect">
  99. <text>确认</text></view>
  100. </view>
  101. </view>
  102. </u-popup>
  103. <!-- 底部删除 -->
  104. <u-popup :show="editall" @close="closeEidt" @open="openEidt" :overlay="false">
  105. <view class="editbox">
  106. <view class="chooseall flex6">
  107. <view class="leftchoose ">
  108. <radio :checked="quan" @click="makeSureAll" color="#D8AB5A"></radio>
  109. <text>全选</text>
  110. </view>
  111. <view class="surebtn" @click="selectDown">
  112. 完成
  113. </view>
  114. </view>
  115. <view class="choosebtn delet-btn">
  116. <view class="delbtn flex1" @click="deleteAcceptor">删除</view>
  117. <!-- <view class="restorebtn flex1" @click="backAcceptor">复原</view> -->
  118. </view>
  119. <view class="choosebtn" v-if="state==0">
  120. <view class="delbtn flex1" @click="examineBillFail()">审核失败</view>
  121. <view class="restorebtn flex1" @click="examineBillSuccess()">审核成功</view>
  122. </view>
  123. </view>
  124. </u-popup>
  125. </view>
  126. </template>
  127. <script>
  128. let that
  129. export default {
  130. data() {
  131. return {
  132. state:'',//业务员为0,供应商为1
  133. supplierId:'',//供应商id
  134. status:'',//承兑人状态
  135. acceptorName:'',//承兑人名称
  136. supplierName:'',//供应商名称
  137. ids:[],//删除承兑人id数组
  138. keywords:'',
  139. editall: false,
  140. quan: false,
  141. show: false,
  142. contract_status: 0,
  143. listall: [],//页面渲染数据
  144. pageIndex: 1,
  145. total: '',
  146. nomore: false,
  147. statusall: 0,
  148. ctrstatus: [{
  149. title: "承兑人状态",
  150. list: [{
  151. name: "全部",
  152. },
  153. {
  154. name: "待审核",
  155. },
  156. {
  157. name: "成功",
  158. },
  159. {
  160. name:'失败'
  161. }
  162. ]
  163. }],
  164. }
  165. },
  166. onLoad(o) {
  167. that = this
  168. this.state = this.$store.state.admin
  169. console.log('state',this.state);
  170. console.log('o',o);
  171. if(o.id){
  172. this.supplierId = o.id
  173. }
  174. },
  175. onShow() {
  176. that.pageIndex = 1
  177. that.nomore = false
  178. that.listall = []
  179. this.init()
  180. },
  181. // 下拉到底部后加载新数据
  182. // onReachBottom() {
  183. // //判断下一页是否存在数据,不存在将显示暂无数据等提示语
  184. // if (this.listall.length >= this.pageIndex * 10) {
  185. // this.pageIndex++; //页数加一
  186. // this.init(); //回调接口
  187. // } else {
  188. // this.nomore = true
  189. // }
  190. // },
  191. methods: {
  192. init() {
  193. uni.showLoading()
  194. uni.$u.http.get(`/api/SupplierAcceptor?pageSize=-1&supplierName=${this.supplierName}&status=${this.status}&acceptorName=${this.keywords}`, {
  195. supplierId:this.supplierId||'',
  196. }, {
  197. custom: {
  198. auth: true
  199. }
  200. }).then((res) => {
  201. uni.hideLoading()
  202. this.total = res.total
  203. this.listall=res.result
  204. // let list = res.result
  205. // if (list.length > 0) {
  206. // list.forEach(item => {
  207. // item.checked = false
  208. // this.listall.push(item)
  209. // })
  210. // if (list.length < 10) {
  211. // that.nomore = true
  212. // }
  213. // }
  214. }).catch((err) => {
  215. uni.hideLoading()
  216. console.log(err)
  217. })
  218. },
  219. //关闭筛选弹框
  220. close() {
  221. this.show = false
  222. },
  223. open() {
  224. },
  225. //搜索功能
  226. changeSeach(){
  227. this.supplierName=this.keywords
  228. that.pageIndex = 1
  229. that.nomore = false
  230. // that.listall = []
  231. this.init()
  232. },
  233. changeSeach2(){
  234. this.acceptorName=this.keywords
  235. that.pageIndex = 1
  236. that.nomore = false
  237. // that.listall = []
  238. this.init()
  239. },
  240. //承兑人状态查询
  241. makeSureSelect() {
  242. that.pageIndex = 1
  243. that.nomore = false
  244. that.listall = []
  245. this.init()
  246. this.close()
  247. },
  248. //承兑人状态查询
  249. choose(title, k) {
  250. if (title == "承兑人状态") {
  251. this.contract_status = k
  252. if (k == 1) {
  253. this.status = 0
  254. } else if (k == 2) {
  255. this.status = 1
  256. } else if (k == 0) {
  257. this.status = ''
  258. }else if(k==3){
  259. this.status=2
  260. }
  261. }
  262. },
  263. //筛选重置
  264. restoreALL() {
  265. this.contract_status = 0
  266. this.status = ''
  267. },
  268. /*底部管理弹框 */
  269. selectDown() {
  270. this.editall = false
  271. this.quan = false
  272. let list = this.listall
  273. list.forEach(item => {
  274. item.checked = false
  275. })
  276. },
  277. /* 部分选择 */
  278. checkBox(id) {
  279. let list = this.listall
  280. list.forEach(item => {
  281. if (item.id == id) {
  282. item.checked = !item.checked
  283. }
  284. })
  285. this.listall = JSON.parse(JSON.stringify(list))
  286. },
  287. /* 全选 */
  288. allSelect() {
  289. let list = this.listall
  290. if (this.quan) {
  291. list.forEach(item => {
  292. item.checked = true
  293. })
  294. } else {
  295. list.forEach(item => {
  296. item.checked = false
  297. })
  298. }
  299. this.listall = JSON.parse(JSON.stringify(list))
  300. console.log(this.listall);
  301. },
  302. makeSureAll() {
  303. this.quan = !this.quan
  304. this.allSelect()
  305. },
  306. closeEidt() {
  307. this.editall = false
  308. },
  309. openEidt() {
  310. this.editall = true
  311. },
  312. //承兑人绑定详情
  313. acpDetail(id) {
  314. uni.navigateTo({
  315. url: "/pages/alldeatil/acptsipplierdetail?id=" + id
  316. })
  317. },
  318. addAcceptor() {
  319. uni.navigateTo({
  320. url: '/pages/alldeatil/addacceptbind?id='+this.supplierId
  321. })
  322. },
  323. //删除承兑人
  324. deleteAcceptor() {
  325. let ids = []
  326. that.listall.forEach(item => {
  327. if (item.checked) {
  328. ids.push(item.id)
  329. }
  330. })
  331. console.log(ids);
  332. if (ids.length == 0) {
  333. that.$toast("请选择承兑人")
  334. return
  335. }
  336. uni.showModal({
  337. title: '提示',
  338. content: "是否批量删除?",
  339. success: function(res) {
  340. if (res.confirm) {
  341. uni.showLoading()
  342. uni.$u.http.post('/api/SupplierAcceptor/delete', [...ids], {
  343. custom: {
  344. auth: true
  345. }
  346. }).then((res) => {
  347. uni.hideLoading()
  348. that.editall = false
  349. that.quan = false
  350. that.$toast("操作成功")
  351. setTimeout(() => {
  352. that.pageIndex = 1
  353. that.nomore = false
  354. that.listall = []
  355. that.init()
  356. }, 500)
  357. }).catch((err) => {
  358. uni.hideLoading()
  359. that.$toast(err.msg)
  360. })
  361. } else if (res.cancel) {
  362. }
  363. }
  364. })
  365. },
  366. //审核失败后重新提交
  367. replayAcceptor(id){
  368. console.log('id',id);
  369. let that = this
  370. this.acceptorIds = [id]
  371. uni.showLoading()
  372. uni.$u.http.post('/api/SupplierAcceptor',{
  373. supplierId:that.supplierId,
  374. acceptorIds:that.acceptorIds
  375. }).then((res) => {
  376. uni.hideLoading()
  377. that.$toast("提交成功")
  378. setTimeout(()=>{
  379. that.init()
  380. },1000)
  381. })
  382. },
  383. //批量审核失败
  384. examineBillFail() {
  385. let ids = []
  386. let that = this
  387. this.listall.forEach(item => {
  388. if (item.checked) {
  389. ids.push(item.id)
  390. }
  391. })
  392. console.log(ids);
  393. if (ids.length == 0) {
  394. that.$toast("请选择承兑人")
  395. return
  396. }
  397. uni.showModal({
  398. title: '提示',
  399. content: '是否审核失败?',
  400. success: function(res) {
  401. if (res.confirm) {
  402. uni.showLoading()
  403. uni.$u.http.post('/api/SupplierAcceptor/update', {
  404. status: 2,
  405. ids:[...ids]
  406. }, {
  407. custom: {
  408. auth: true
  409. }
  410. }).then((res) => {
  411. uni.hideLoading()
  412. that.$toast("操作成功")
  413. that.init()
  414. }).catch((err) => {
  415. uni.hideLoading()
  416. that.$toast(err.msg)
  417. })
  418. } else if (res.cancel) {
  419. console.log('用户点击取消');
  420. }
  421. }
  422. })
  423. },
  424. //批量审核成功
  425. examineBillSuccess() {
  426. let ids = []
  427. let that = this
  428. this.listall.forEach(item => {
  429. if (item.checked) {
  430. ids.push(item.id)
  431. }
  432. })
  433. console.log(ids);
  434. if (ids.length == 0) {
  435. that.$toast("请选择承兑人")
  436. return
  437. }
  438. uni.showModal({
  439. title: '提示',
  440. content: '是否审核成功?',
  441. success: function(res) {
  442. if (res.confirm) {
  443. uni.showLoading()
  444. uni.$u.http.post('/api/SupplierAcceptor/update', {
  445. status: 1,
  446. ids:[...ids]
  447. }, {
  448. custom: {
  449. auth: true
  450. }
  451. }).then((res) => {
  452. uni.hideLoading()
  453. that.$toast("操作成功")
  454. that.init()
  455. }).catch((err) => {
  456. uni.hideLoading()
  457. that.$toast(err.msg)
  458. })
  459. } else if (res.cancel) {
  460. console.log('用户点击取消');
  461. }
  462. }
  463. });
  464. },
  465. }
  466. }
  467. </script>
  468. <style lang="scss">
  469. page {
  470. background-color: #F6F6F6 !important;
  471. }
  472. .headbgbox {
  473. background-color: #fff;
  474. padding: 23rpx 31rpx;
  475. box-sizing: border-box;
  476. position: fixed;
  477. top: 0;
  478. z-index: 999;
  479. width: 100%;
  480. .screen {
  481. display: flex;
  482. justify-content: center;
  483. align-items: center;
  484. padding-left: 30rpx;
  485. }
  486. }
  487. .searchbox {
  488. padding-left: 30rpx;
  489. box-sizing: border-box;
  490. background-color: #ECECEC;
  491. border-radius: 38rpx;
  492. // width: 688rpx;
  493. flex: 1;
  494. height: 75rpx;
  495. margin: 0 auto;
  496. display: flex;
  497. align-items: center;
  498. justify-content: center;
  499. }
  500. .acpcardlist {
  501. margin-top: 140rpx;
  502. .acpcard {
  503. flex: 1;
  504. // width: 690rpx;
  505. height: 333rpx;
  506. margin: 0 30rpx;
  507. // margin-top: 20rpx;
  508. background-color: #fff;
  509. border-radius: 20rpx;
  510. box-shadow: 0px 8rpx 20rpx 1rpx rgba(31, 36, 42, 0.08);
  511. .allmsg {
  512. display: flex;
  513. padding: 40rpx 30rpx;
  514. box-sizing: border-box;
  515. width: 100%;
  516. .cicle {
  517. width: 28rpx;
  518. height: 28rpx;
  519. border-radius: 50%;
  520. background-color: #D8AB5A;
  521. margin-top: 8rpx;
  522. }
  523. .acpcont {
  524. margin-left: 20rpx;
  525. width: 100%;
  526. .acpname {
  527. box-sizing: border-box;
  528. display: flex;
  529. align-items: center;
  530. padding-bottom: 30rpx;
  531. flex-grow: 1;
  532. width: 100%;
  533. // width: 572rpx;
  534. font-size: 34rpx;
  535. font-weight: 600;
  536. .tagdel2{
  537. margin-left: 10rpx;
  538. width: 100rpx;
  539. // height: 36rpx;
  540. border-radius: 10rpx;
  541. background-color: rgba(8, 102, 214,.3);
  542. font-size: 24rpx;
  543. font-weight: 400;
  544. color: rgb(8, 102, 214);
  545. line-height: 36rpx;
  546. text-align: center;
  547. }
  548. .tagdel {
  549. margin-left: 10rpx;
  550. width: 80rpx;
  551. // height: 36rpx;
  552. border-radius: 10rpx;
  553. background-color: rgb(241, 206, 195);
  554. font-size: 24rpx;
  555. font-weight: 400;
  556. color: rgb(213, 109, 77);
  557. line-height: 36rpx;
  558. text-align: center;
  559. }
  560. .tagpass{
  561. margin-left: 10rpx;
  562. width: 80rpx;
  563. height: 36rpx;
  564. border-radius: 10rpx;
  565. background-color: rgba(30, 190, 130,.5);
  566. font-size: 24rpx;
  567. font-weight: 400;
  568. color: rgb(0, 200, 83);
  569. line-height: 36rpx;
  570. text-align: center;
  571. }
  572. .tag {
  573. margin-left: 10rpx;
  574. width: 80rpx;
  575. height: 36rpx;
  576. border-radius: 10rpx;
  577. background-color: rgb(232, 222, 203);
  578. font-size: 24rpx;
  579. font-weight: 400;
  580. color: #D8AB5A;
  581. line-height: 36rpx;
  582. text-align: center;
  583. }
  584. }
  585. }
  586. .acpinfo {
  587. border-top: 1rpx solid #E8E8E8;
  588. display: flex;
  589. flex: 1;
  590. flex-direction: column;
  591. font-size: 28rpx;
  592. color: #BEBDBB;
  593. justify-content: space-between;
  594. box-sizing: border-box;
  595. .pt {
  596. padding-top: 20rpx;
  597. }
  598. }
  599. }
  600. }
  601. }
  602. .totalmanage {
  603. margin-top: 90rpx;
  604. margin-bottom: 100rpx;
  605. // position: fixed;
  606. bottom: 0;
  607. display: flex;
  608. justify-content: space-between;
  609. align-items: center;
  610. width: 100%;
  611. padding: 0 30rpx;
  612. box-sizing: border-box;
  613. .managebox {
  614. width: 23.8rpx;
  615. height: 29.7rpx;
  616. image {
  617. width: 100%;
  618. height: 100%;
  619. }
  620. }
  621. .maboxtitls {
  622. width: 160rpx;
  623. height: 60rpx;
  624. display: flex;
  625. align-items: center;
  626. justify-content: center;
  627. border-radius: 30rpx;
  628. background-color: #D9D9D9;
  629. // line-height: 60rpx;
  630. font-size: 28rpx;
  631. box-sizing: border-box;
  632. // align-items: center;
  633. }
  634. }
  635. .plusicon {
  636. position: fixed;
  637. left: 0;
  638. right: 0;
  639. margin: 0 auto;
  640. bottom: 110rpx;
  641. width: 150rpx;
  642. height: 150rpx;
  643. background: url("@/static/img/plusicon.png") no-repeat;
  644. background-size: 150rpx 150rpx;
  645. }
  646. .editbox{
  647. position: relative;
  648. }
  649. .delet-btn{
  650. position: absolute;
  651. top: 6px;
  652. left: 140px;
  653. .delbtn{
  654. width: 181rpx !important;
  655. }
  656. }
  657. </style>