acceptor.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598
  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-model="keywords" placeholder="请输入承兑人名称" placeholder-style="color:#BBBCBE"
  7. @blur="changeSeach" />
  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" @click="acpDetail(item.id)">
  22. <view class="allmsg">
  23. <view class="cicle" v-if="item.isDeleted==0"></view>
  24. <view class="cicle" v-if="item.isDeleted==1" style="background-color:#D05C39"></view>
  25. <view class="acpcont">
  26. <view class="acpname">
  27. <text>{{item.name}}</text>
  28. <view class="tag" v-if="item.isDeleted==0">正常</view>
  29. <view class="tagdel" v-if="item.isDeleted==1">删除</view>
  30. </view>
  31. <view class="acpinfo ">
  32. <text class="pt">账号:{{item.bankAccount}}</text>
  33. <text class="pt">服务费率:{{item.serviceRate}}%</text>
  34. <text class="pt">利率:{{item.interest}}%</text>
  35. <text class="pt" @click.stop="addpdf(item.templateServiceContract)">点击获取服务合同信息</text>
  36. </view>
  37. </view>
  38. </view>
  39. </view>
  40. </view>
  41. </view>
  42. <view class="nomore" v-if="listall.length==0">
  43. <text>暂无数据</text>
  44. </view>
  45. <view class="totalmanage " v-if="listall.length>0">
  46. <text style="color:#68625B;font-size: 28rpx;">合计:{{total}}份</text>
  47. <view class=" maboxtitls" @click="editall=true">
  48. <view class="managebox">
  49. <image src="/static/img/manage.png" mode="aspectFit"></image>
  50. </view>
  51. <text style="padding-left: 15rpx;">管理</text>
  52. </view>
  53. </view>
  54. <view class="safebt"></view>
  55. <view class="plusicon" @click="addAcceptor"></view>
  56. <u-popup :show="show" @close="close" @open="open">
  57. <view class="popscreen" style="height: 340rpx;">
  58. <view class="checklist" v-for="(item,index) in ctrstatus" :key="index">
  59. <view class="alllistbtn">
  60. <text class="btntitle" style="">{{item.title}}</text>
  61. <view class="yunbtn">
  62. <view class="btnchoose" v-for="(i,k) in item.list" :key="k" @click="choose(item.title,k)"
  63. :class="[contract_status == k?'active':'btnchoose']">
  64. <text>{{i.name}}</text>
  65. </view>
  66. </view>
  67. </view>
  68. </view>
  69. <view class="aszs flex6">
  70. <view class="againbtn" @click="restoreALL"><text>重置</text></view>
  71. <view class="againbtn" style="color: #D8AB5A;border: 1rpx solid #D8AB5A;" @click="makeSureSelect">
  72. <text>确认</text>
  73. </view>
  74. </view>
  75. </view>
  76. </u-popup>
  77. <!-- 底部删除 -->
  78. <u-popup :show="editall" @close="closeEidt" @open="openEidt" :overlay="false">
  79. <view class="editbox">
  80. <view class="chooseall flex6">
  81. <view class="leftchoose ">
  82. <radio :checked="quan" @click="makeSureAll" color="#D8AB5A"></radio>
  83. <text>全选</text>
  84. </view>
  85. <view class="surebtn" @click="selectDown">
  86. 完成
  87. </view>
  88. </view>
  89. <view class="choosebtn">
  90. <view class="delbtn flex1" @click="deleteAcceptor">删除</view>
  91. <view class="restorebtn flex1" @click="backAcceptor">复原</view>
  92. </view>
  93. </view>
  94. </u-popup>
  95. <tabar checked="acceptor"></tabar>
  96. </view>
  97. </template>
  98. <script>
  99. let that
  100. import tabar from "@/componet/tabbar/tabbar.vue"
  101. export default {
  102. components: {
  103. tabar
  104. },
  105. data() {
  106. return {
  107. isPull: false,
  108. keywords: '',
  109. name: '', //承兑人名称
  110. Status: 5, //承兑人筛选
  111. editall: false,
  112. quan: false,
  113. show: false,
  114. contract_status: 0,
  115. listall: [],
  116. pageIndex: 1,
  117. pages: 0,
  118. total: '',
  119. nomore: false,
  120. statusall: 0,
  121. ctrstatus: [{
  122. title: "承兑人状态",
  123. list: [{
  124. name: "全部",
  125. },
  126. {
  127. name: "正常",
  128. },
  129. {
  130. name: "已删除",
  131. },
  132. ]
  133. }],
  134. }
  135. },
  136. onLoad() {
  137. that = this
  138. // this.init()
  139. },
  140. onShow() {
  141. that.pageIndex = 1
  142. that.nomore = false
  143. that.listall = []
  144. this.init()
  145. },
  146. // // 下拉到底部后加载新数据
  147. // onReachBottom() {
  148. // //判断下一页是否存在数据,不存在将显示暂无数据等提示语
  149. // if (this.listall.length >= this.pageIndex * 10) {
  150. // this.pageIndex++; //页数加一
  151. // this.init(); //回调接口
  152. // } else {
  153. // this.nomore = true
  154. // }
  155. // },
  156. //触底加载数据
  157. // onPullDownRefresh(){
  158. // this.pageIndex = 1 ;
  159. // this.isPull = true;
  160. // this.init()
  161. // },
  162. // onReachBottom(){
  163. // if(this.pageIndex<this.pages){
  164. // this.pageIndex++;
  165. // this.init()
  166. // }
  167. // },
  168. methods: {
  169. init() {
  170. uni.showLoading()
  171. uni.$u.http.get(`/api/Acceptor/search?pageSize=-1&Name=${this.name}&Status=${this.Status}`, {
  172. custom: {
  173. auth: true
  174. }
  175. }).then((res) => {
  176. uni.hideLoading()
  177. console.log(res);
  178. this.total = res.total
  179. this.listall = res.result
  180. // let list = res.result
  181. // if (list.length > 0) {
  182. // list.forEach(item => {
  183. // item.checked = false
  184. // this.listall.push(item)
  185. // })
  186. // if (list.length < 10) {
  187. // that.nomore = true
  188. // }
  189. // }
  190. }).catch((err) => {
  191. uni.hideLoading()
  192. console.log(err)
  193. })
  194. },
  195. close() {
  196. this.show = false
  197. },
  198. open() {
  199. },
  200. //搜索功能
  201. changeSeach() {
  202. this.name = this.keywords
  203. that.pageIndex = 1
  204. that.nomore = false
  205. that.listall = []
  206. this.init()
  207. },
  208. //承兑人状态查询
  209. makeSureSelect() {
  210. that.pageIndex = 1
  211. that.nomore = false
  212. that.listall = []
  213. this.init()
  214. this.close()
  215. },
  216. restoreALL() {
  217. this.contract_status = 0
  218. this.Status = 0
  219. },
  220. choose(title, k) {
  221. if (title == "承兑人状态") {
  222. this.contract_status = k
  223. if (k == 2) {
  224. this.Status = 4
  225. } else if (k == 1) {
  226. this.Status = 5
  227. } else if (k == 0) {
  228. this.Status = 0
  229. }
  230. }
  231. },
  232. selectDown() {
  233. this.editall = false
  234. this.quan = false
  235. let list = this.listall
  236. list.forEach(item => {
  237. item.checked = false
  238. })
  239. },
  240. checkBox(id) {
  241. let list = this.listall
  242. list.forEach(item => {
  243. if (item.id == id) {
  244. item.checked = !item.checked
  245. }
  246. })
  247. this.listall = JSON.parse(JSON.stringify(list))
  248. },
  249. allSelect() {
  250. let list = this.listall
  251. if (this.quan) {
  252. list.forEach(item => {
  253. item.checked = true
  254. })
  255. } else {
  256. list.forEach(item => {
  257. item.checked = false
  258. })
  259. }
  260. this.listall = JSON.parse(JSON.stringify(list))
  261. },
  262. makeSureAll() {
  263. this.quan = !this.quan
  264. this.allSelect()
  265. },
  266. closeEidt() {
  267. this.editall = false
  268. },
  269. openEidt() {
  270. this.editall = true
  271. },
  272. acpDetail(id) {
  273. uni.navigateTo({
  274. url: "/pages/alldeatil/acptdetail?id=" + id
  275. })
  276. },
  277. addAcceptor() {
  278. console.log(111);
  279. uni.showToast({
  280. icon: 'none',
  281. title: '请到PC端做新增承兑人操作',
  282. duration: 2000
  283. });
  284. // uni.navigateTo({
  285. // url: '/pages/alldeatil/addnewacpt'
  286. // })
  287. },
  288. deleteAcceptor() {
  289. let ids = []
  290. that.listall.forEach(item => {
  291. if (item.checked) {
  292. ids.push(item.id)
  293. }
  294. })
  295. if (ids.length == 0) {
  296. that.$toast("请选择合同")
  297. return
  298. }
  299. uni.showModal({
  300. title: '提示',
  301. content: "是否批量删除?",
  302. success: function(res) {
  303. if (res.confirm) {
  304. uni.showLoading()
  305. uni.$u.http.post('/api/Acceptor/manager', {
  306. ids: ids,
  307. operateType: 1
  308. }, {
  309. custom: {
  310. auth: true
  311. }
  312. }).then((res) => {
  313. uni.hideLoading()
  314. that.editall = false
  315. that.quan = false
  316. that.$toast("操作成功")
  317. setTimeout(() => {
  318. that.pageIndex = 1
  319. that.nomore = false
  320. that.listall = []
  321. that.init()
  322. }, 500)
  323. }).catch((err) => {
  324. uni.hideLoading()
  325. that.$toast(err.msg)
  326. })
  327. } else if (res.cancel) {
  328. }
  329. }
  330. })
  331. },
  332. backAcceptor() {
  333. let ids = []
  334. that.listall.forEach(item => {
  335. if (item.checked) {
  336. ids.push(item.id)
  337. }
  338. })
  339. if (ids.length == 0) {
  340. that.$toast("请选择合同")
  341. return
  342. }
  343. uni.showModal({
  344. title: '提示',
  345. content: "是否批量复原?",
  346. success: function(res) {
  347. if (res.confirm) {
  348. uni.showLoading()
  349. uni.$u.http.post('/api/Acceptor/manager', {
  350. ids: ids,
  351. operateType: 2
  352. }, {
  353. custom: {
  354. auth: true
  355. }
  356. }).then((res) => {
  357. uni.hideLoading()
  358. that.editall = false
  359. that.quan = false
  360. that.$toast("操作成功")
  361. setTimeout(() => {
  362. that.pageIndex = 1
  363. that.nomore = false
  364. that.listall = []
  365. that.init()
  366. }, 500)
  367. }).catch((err) => {
  368. uni.hideLoading()
  369. that.$toast(err.msg)
  370. })
  371. } else if (res.cancel) {
  372. }
  373. }
  374. })
  375. },
  376. addpdf(msg) {
  377. uni.showModal({
  378. title: '提示',
  379. content: "是否获取服务合同信息?",
  380. success: function(res) {
  381. msg.forEach(item=>{
  382. if(res.confirm){
  383. uni.setClipboardData({
  384. data: item,
  385. success: function() {
  386. that.$toast("复制成功,请到浏览器下载")
  387. }
  388. });
  389. }else if(res.cancel){
  390. console.log('取消');
  391. }
  392. })
  393. }
  394. })
  395. },
  396. }
  397. }
  398. </script>
  399. <style lang="scss">
  400. page {
  401. background-color: #F6F6F6 !important;
  402. }
  403. .headbgbox {
  404. background-color: #fff;
  405. padding: 23rpx 31rpx;
  406. box-sizing: border-box;
  407. position: fixed;
  408. top: 0;
  409. z-index: 999;
  410. width: 100%;
  411. .screen {
  412. display: flex;
  413. justify-content: center;
  414. align-items: center;
  415. padding-left: 30rpx;
  416. }
  417. }
  418. .searchbox {
  419. padding-left: 30rpx;
  420. box-sizing: border-box;
  421. background-color: #ECECEC;
  422. border-radius: 38rpx;
  423. // width: 688rpx;
  424. flex: 1;
  425. height: 75rpx;
  426. margin: 0 auto;
  427. display: flex;
  428. align-items: center;
  429. justify-content: center;
  430. }
  431. .acpcardlist {
  432. margin-top: 140rpx;
  433. .acpcard {
  434. flex: 1;
  435. // width: 690rpx;
  436. height: 420rpx;
  437. margin: 0 30rpx;
  438. // margin-top: 20rpx;
  439. background-color: #fff;
  440. border-radius: 20rpx;
  441. box-shadow: 0px 8rpx 20rpx 1rpx rgba(31, 36, 42, 0.08);
  442. .allmsg {
  443. display: flex;
  444. padding: 40rpx 30rpx;
  445. box-sizing: border-box;
  446. width: 100%;
  447. .cicle {
  448. width: 28rpx;
  449. height: 28rpx;
  450. border-radius: 50%;
  451. background-color: #D8AB5A;
  452. margin-top: 8rpx;
  453. }
  454. .acpcont {
  455. margin-left: 20rpx;
  456. width: 100%;
  457. .acpname {
  458. box-sizing: border-box;
  459. display: flex;
  460. align-items: center;
  461. padding-bottom: 30rpx;
  462. flex-grow: 1;
  463. width: 100%;
  464. // width: 572rpx;
  465. font-size: 42rpx;
  466. font-weight: 600;
  467. .tagdel {
  468. margin-left: 10rpx;
  469. width: 80rpx;
  470. height: 36rpx;
  471. border-radius: 10rpx;
  472. background-color: rgb(241, 206, 195);
  473. font-size: 24rpx;
  474. font-weight: 400;
  475. color: rgb(213, 109, 77);
  476. line-height: 36rpx;
  477. text-align: center;
  478. }
  479. .tag {
  480. margin-left: 10rpx;
  481. width: 80rpx;
  482. height: 36rpx;
  483. border-radius: 10rpx;
  484. background-color: rgb(232, 222, 203);
  485. font-size: 24rpx;
  486. font-weight: 400;
  487. color: #D8AB5A;
  488. line-height: 36rpx;
  489. text-align: center;
  490. }
  491. }
  492. }
  493. .acpinfo {
  494. // height: 100%;
  495. border-top: 1rpx solid #E8E8E8;
  496. display: flex;
  497. flex: 1;
  498. flex-direction: column;
  499. font-size: 28rpx;
  500. color: #BEBDBB;
  501. justify-content: space-between;
  502. box-sizing: border-box;
  503. .pt {
  504. padding-top: 20rpx;
  505. }
  506. }
  507. }
  508. }
  509. }
  510. .totalmanage {
  511. margin-top: 90rpx;
  512. margin-bottom: 100rpx;
  513. // position: fixed;
  514. bottom: 0;
  515. display: flex;
  516. justify-content: space-between;
  517. align-items: center;
  518. width: 100%;
  519. padding: 0 30rpx;
  520. box-sizing: border-box;
  521. .managebox {
  522. width: 23.8rpx;
  523. height: 29.7rpx;
  524. image {
  525. width: 100%;
  526. height: 100%;
  527. }
  528. }
  529. .maboxtitls {
  530. width: 160rpx;
  531. height: 60rpx;
  532. display: flex;
  533. align-items: center;
  534. justify-content: center;
  535. border-radius: 30rpx;
  536. background-color: #D9D9D9;
  537. // line-height: 60rpx;
  538. font-size: 28rpx;
  539. box-sizing: border-box;
  540. // align-items: center;
  541. }
  542. }
  543. .plusicon {
  544. position: fixed;
  545. left: 0;
  546. right: 0;
  547. margin: 0 auto;
  548. bottom: 110rpx;
  549. width: 150rpx;
  550. height: 150rpx;
  551. background: url("@/static/img/plusicon.png") no-repeat;
  552. background-size: 150rpx 150rpx;
  553. }
  554. </style>