index.html 8.0 KB

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