index.html 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>{{userName}}-对账单</title>
  8. <link rel="stylesheet" href="./css/common.css">
  9. <script src="./js/resize.js"></script>
  10. <script src="./js/moent.min.js"></script>
  11. <script src="./js/vue.min.js"></script>
  12. <script src="./js/axios.min.js"></script>
  13. <style>
  14. .content {
  15. width: 100%;
  16. height: 100vh;
  17. background: #f3f3f3;
  18. }
  19. .head {
  20. /* 头部 */
  21. background: #848484;
  22. padding: .3rem .2rem 1rem;
  23. box-sizing: border-box;
  24. color: #fff;
  25. position: relative;
  26. }
  27. .shareTime {
  28. font-size: .12rem;
  29. text-align: center;
  30. margin-bottom: .2rem;
  31. }
  32. .tip {
  33. font-weight: bold;
  34. }
  35. .tipDesc {
  36. font-weight: bold;
  37. font-size: .12rem;
  38. line-height: .5rem;
  39. }
  40. .orderInfo {
  41. background: #fff;
  42. box-sizing: border-box;
  43. padding: .2rem;
  44. width: calc(100% - .4rem);
  45. border-radius: .3rem;
  46. overflow: hidden;
  47. position: absolute;
  48. bottom: -1.1rem;
  49. left: .2rem;
  50. color: #333;
  51. }
  52. .downLoadTip,
  53. .downLoadUrl {
  54. max-width: 83%;
  55. font-size: .12rem;
  56. word-wrap: break-word;
  57. white-space: normal;
  58. word-break: break-all;
  59. }
  60. .downLoadTip {
  61. margin-top: .2rem;
  62. line-height: .4rem;
  63. color: #999;
  64. }
  65. .downLoadUrl {
  66. color: #007aff;
  67. }
  68. .amount {
  69. color: #f0ad4e;
  70. font-weight: bold;
  71. }
  72. .handleOrder {
  73. color: #999;
  74. padding: 1.3rem .2rem .2rem;
  75. font-size: .12rem;
  76. }
  77. .handleOrder span:last-child {
  78. color: #007aff;
  79. }
  80. /* 滚动盒子 */
  81. .oederBox {
  82. flex-grow: 1;
  83. overflow: auto;
  84. }
  85. .oederList {
  86. background: #fff;
  87. border-bottom: .01rem solid #e0e0e0;
  88. padding: .2rem;
  89. box-sizing: border-box;
  90. }
  91. .order-l {
  92. flex: 1;
  93. }
  94. .order-t,
  95. .order-b {
  96. font-size: .12rem;
  97. color: #999;
  98. }
  99. .order-t span:first-child {
  100. color: #333;
  101. }
  102. .order-b,
  103. .list-b {
  104. line-height: .5rem;
  105. }
  106. .order-b span {
  107. color: #f0ad4e;
  108. vertical-align: middle;
  109. }
  110. .order-r img {
  111. width: .5rem;
  112. height: .5rem;
  113. border-radius: 50%;
  114. object-fit: contain;
  115. margin-left: .2rem;
  116. }
  117. /* 折叠列表 */
  118. .otherList {
  119. width: 100%;
  120. box-sizing: border-box;
  121. padding-left: .4rem;
  122. background-color: #fff;
  123. }
  124. .list {
  125. box-sizing: border-box;
  126. padding: .2rem;
  127. border-bottom: .01rem solid #e0e0e0;
  128. font-size: .12rem;
  129. }
  130. .list:last-child {
  131. border-bottom: 0 solid #e0e0e0;
  132. }
  133. .list-b div:first-child {
  134. text-overflow: ellipsis;
  135. overflow: hidden;
  136. white-space: nowrap;
  137. width: 70%;
  138. }
  139. .list-b {
  140. color: #999;
  141. }
  142. </style>
  143. </head>
  144. <body>
  145. <div id="app" class="content flex flex-column">
  146. <div class="head">
  147. <div class="shareTime">
  148. 分享时间:2022-11-15 09:59:29
  149. </div>
  150. <div class="tip">
  151. 尊敬的“{{customerName}}”,您好!
  152. </div>
  153. <div class="tipDesc">
  154. 以下是您2022-11-01至2022-11-30在本店的对账单,请查阅。
  155. </div>
  156. <div class="orderInfo">
  157. <div class="flex align_center flex-between">
  158. <span>欠款金额</span>
  159. <span class="amount">¥160.00</span>
  160. </div>
  161. <div class="downLoadTip">
  162. 单据明细Excel下载请点击下面的链接:
  163. </div>
  164. <div class="downLoadUrl" @click="downLoad">
  165. http://iscm.360arrow.com/bill/202211150004.xls
  166. </div>
  167. </div>
  168. </div>
  169. <div class="orderCon flex flex-column">
  170. <div class="handleOrder flex flex-between align_center">
  171. <span>共{{saleList.length}}个销售单</span>
  172. <span>全部展开</span>
  173. </div>
  174. <div class="oederBox">
  175. <div class="oederList flex align_center" v-for="(item,i) in saleList" :key="item.bizSn">
  176. <div class="order-l">
  177. <div class="order-t flex align_center flex-between">
  178. <span>{{item.bizDate.substr(0,10)}}</span>
  179. <span>{{item.bizNo}}</span>
  180. </div>
  181. <div class="order-b flex align_center flex-between">
  182. <div>应付:¥{{item.bizAmount ||0}}</div>
  183. <div>已付:¥{{item.settledAmount | 0}}</div>
  184. <div>欠款:<span>¥{{item.unsettleAmount|| 0}}</span></div>
  185. </div>
  186. </div>
  187. <div class="order-r" @click="handleShow">
  188. <img src="./img/close.png" alt="" v-if="!isShow">
  189. <img src="./img/open.png" alt="" v-else>
  190. </div>
  191. </div>
  192. <div class="otherList" v-if="isShow">
  193. <div class="list">
  194. <div class="list-t flex align_center flex-between">
  195. <span>JA-11070N</span>
  196. <span>¥40.00</span>
  197. </div>
  198. <div class="list-b flex align_center flex-between">
  199. <div>箭牌空气滤清器 07款丰田新皇冠207款丰田新皇冠2.5 / 3.0车用</div>
  200. <div>x2</div>
  201. </div>
  202. </div>
  203. <div class="list">
  204. <div class="list-t flex align_center flex-between">
  205. <span>JA-11070N</span>
  206. <span>¥40.00</span>
  207. </div>
  208. <div class="list-b flex align_center flex-between">
  209. <div>箭牌空气滤清器 07款丰田新皇冠2.5 / 3.0车用</div>
  210. <div>x2</div>
  211. </div>
  212. </div>
  213. </div>
  214. </div>
  215. </div>
  216. </div>
  217. </body>
  218. <script>
  219. new Vue({
  220. el: '#app',
  221. data: {
  222. isShow:false,
  223. ajaxUrl:'http://192.168.0.215:8503/qpls-md/',
  224. // customerName:'',
  225. // userName:'',
  226. saleList:[],
  227. customerName:'名字名字',
  228. customerSn:'437705264826884096',
  229. startTime:'2022-11-01 00:00:00',
  230. endTime:'2022-11-30 23:59:59',
  231. },
  232. created() {
  233. // let dataInfo=JSON.parse(this.getUrlParam(data));
  234. // this.customerName = dataInfo.customerName;
  235. // this.userName = dataInfo.userName;
  236. // this.newObj= dataInfo;
  237. // this.loadData(dataInfo);
  238. },
  239. methods:{
  240. loadData(item){
  241. let ajaxData={
  242. targetSn: item.customerSn,
  243. bizBeginDate: item.startTime,
  244. bizEndDate: item.endTime
  245. }
  246. axios.post(this.ajaxUrl+'verify/queryUnsettleSaleList',ajaxData).then((res)=> {
  247. this.saleList=res.data;
  248. }).catch((error)=> {
  249. console.log(error);
  250. });
  251. },
  252. handleShow(){
  253. this.isShow = !this.isShow
  254. },
  255. getUrlParam(name){
  256. var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
  257. var r = window.location.search.substr(1).match(reg); //匹配目标参数
  258. if (r!=null) return unescape(r[2]); return null; //返回参数值
  259. },
  260. downLoad(){
  261. let ajaxData={
  262. targetSn: this.customerSn,
  263. bizBeginDate: this.startTime,
  264. bizEndDate: this.endTime,
  265. dealerSn:"3429"
  266. }
  267. axios.get(this.ajaxUrl+'verify/exportExcel',{params:ajaxData},{responseType: 'blob', dataType:"jsonp",jsonp:"callback"}).then((res)=> {
  268. console.log('res',res)
  269. if(res.status == 200){
  270. downloadExcel(res.data, '对账单明细')
  271. }
  272. }).catch((error)=> {
  273. console.log(error);
  274. });
  275. }
  276. }
  277. })
  278. </script>
  279. </html>