|
@@ -1,358 +1,361 @@
|
|
<!DOCTYPE html>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<html lang="en">
|
|
|
|
|
|
- <head>
|
|
|
|
- <meta charset="UTF-8">
|
|
|
|
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
- <title>对账单</title>
|
|
|
|
- <link rel="stylesheet" href="./css/common.css">
|
|
|
|
- <script src="./js/resize.js"></script>
|
|
|
|
- <script src="./js/moent.min.js"></script>
|
|
|
|
- <script src="./js/vue.min.js"></script>
|
|
|
|
- <script src="./js/axios.min.js"></script>
|
|
|
|
- <style>
|
|
|
|
- [v-cloak] {
|
|
|
|
- display: none
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .content {
|
|
|
|
- width: 100%;
|
|
|
|
- height: 100vh;
|
|
|
|
- background: #f3f3f3;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .head {
|
|
|
|
- /* 头部 */
|
|
|
|
- background: #848484;
|
|
|
|
- padding: .3rem .3rem 1rem;
|
|
|
|
- box-sizing: border-box;
|
|
|
|
- color: #fff;
|
|
|
|
- position: relative;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .shareTime {
|
|
|
|
- text-align: center;
|
|
|
|
- margin-bottom: .2rem;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .tip {
|
|
|
|
- font-weight: bold;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .tipDesc {
|
|
|
|
- font-weight: bold;
|
|
|
|
- font-size: .24rem;
|
|
|
|
- line-height: .5rem;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .orderInfo {
|
|
|
|
- background: #fff;
|
|
|
|
- box-sizing: border-box;
|
|
|
|
- padding: .2rem;
|
|
|
|
- width: calc(100% - .4rem);
|
|
|
|
- border-radius: .3rem;
|
|
|
|
- overflow: hidden;
|
|
|
|
- position: absolute;
|
|
|
|
- bottom: -1.9rem;
|
|
|
|
- left: .2rem;
|
|
|
|
- color: #333;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .downLoadTip,
|
|
|
|
- .downLoadUrl {
|
|
|
|
- max-width: 83%;
|
|
|
|
- font-size: .25rem;
|
|
|
|
- word-wrap: break-word;
|
|
|
|
- white-space: normal;
|
|
|
|
- word-break: break-all;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .downLoadTip {
|
|
|
|
- margin-top: .2rem;
|
|
|
|
- line-height: .4rem;
|
|
|
|
- color: #999;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .downLoadUrl {
|
|
|
|
- color: #007aff;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .amount {
|
|
|
|
- font-weight: bold;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .amountName {
|
|
|
|
- font-weight: bold;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .handleOrder {
|
|
|
|
- color: #999;
|
|
|
|
- padding: 0rem .2rem .2rem;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .handleOrder span:last-child {
|
|
|
|
- color: #007aff;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- /* 滚动盒子 */
|
|
|
|
- .oederBox {
|
|
|
|
- flex-grow: 1;
|
|
|
|
- overflow: auto;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .oederList {
|
|
|
|
- background: #fff;
|
|
|
|
- border-bottom: .01rem solid #e0e0e0;
|
|
|
|
- padding: .2rem;
|
|
|
|
- box-sizing: border-box;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .order-l {
|
|
|
|
- flex: 1;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .order-t,
|
|
|
|
- .order-b {
|
|
|
|
- font-size: .12rem;
|
|
|
|
- color: #999;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .order-t span:first-child {
|
|
|
|
- color: #333;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .order-b,
|
|
|
|
- .list-b {
|
|
|
|
- line-height: .5rem;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .order-b span {
|
|
|
|
- color: #f0ad4e;
|
|
|
|
- vertical-align: middle;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .order-r img {
|
|
|
|
- width: .5rem;
|
|
|
|
- height: .5rem;
|
|
|
|
- border-radius: 50%;
|
|
|
|
- object-fit: contain;
|
|
|
|
- margin-left: .2rem;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- /* 折叠列表 */
|
|
|
|
- .otherList {
|
|
|
|
- width: 100%;
|
|
|
|
- box-sizing: border-box;
|
|
|
|
- padding-left: .4rem;
|
|
|
|
- background-color: #fff;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .list {
|
|
|
|
- box-sizing: border-box;
|
|
|
|
- padding: .2rem;
|
|
|
|
- border-bottom: .01rem solid #e0e0e0;
|
|
|
|
- font-size: .12rem;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .list:last-child {
|
|
|
|
- border-bottom: 0 solid #e0e0e0;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .list-b div:first-child {
|
|
|
|
- text-overflow: ellipsis;
|
|
|
|
- overflow: hidden;
|
|
|
|
- white-space: nowrap;
|
|
|
|
- width: 70%;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .list-b {
|
|
|
|
- color: #999;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .downLoadCon {
|
|
|
|
- position: relative;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .finishImg {
|
|
|
|
- width: 1rem;
|
|
|
|
- height: 1rem;
|
|
|
|
- position: absolute;
|
|
|
|
- right: .06rem;
|
|
|
|
- bottom: -.1rem;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .amount_list {
|
|
|
|
- margin-bottom: 0.06rem;
|
|
|
|
- }
|
|
|
|
- </style>
|
|
|
|
- </head>
|
|
|
|
-
|
|
|
|
- <body>
|
|
|
|
- <div id="app" class="content flex flex-column">
|
|
|
|
- <div class="head">
|
|
|
|
- <div class="shareTime">
|
|
|
|
- 分享时间:{{info.createDate}}
|
|
|
|
- </div>
|
|
|
|
- <div class="tip" v-if="info.customer">
|
|
|
|
- 尊敬的“{{info.customer.customerName || '--'}}”,您好!
|
|
|
|
- </div>
|
|
|
|
- <div class="tipDesc">
|
|
|
|
- 以下是您在本店的未结账单,请查阅。
|
|
|
|
- </div>
|
|
|
|
- <div class="orderInfo"
|
|
|
|
- :style="{bottom:(info.discountAmount && info.discountAmount*1 !=0 ? '-1.9rem':'-1.3rem' )}">
|
|
|
|
- <div class="amount_list flex align_center flex-between">
|
|
|
|
- <span class="amountName">货款金额</span>
|
|
|
|
- <span class="amount" v-if="info.totalAmount"
|
|
|
|
- :style="{color:!info.discountAmount? '#f0ad4e':'#333333'}">¥{{toThousands(info.totalAmount,2)}}</span>
|
|
|
|
- <span class="amount" v-else
|
|
|
|
- :style="{color:!info.discountAmount ? '#f0ad4e':'#333333'}">¥0.00</span>
|
|
|
|
- </div>
|
|
|
|
- <div v-if="info.discountAmount && info.discountAmount*1 !=0">
|
|
|
|
- <div class="amount_list flex align_center flex-between">
|
|
|
|
- <span class="amountName">折让金额</span>
|
|
|
|
- <span class="amount"
|
|
|
|
- v-if="info.discountAmount">-¥{{toThousands(info.discountAmount,2)}}</span>
|
|
|
|
- <span class="amount" v-else>¥0.00</span>
|
|
|
|
- </div>
|
|
|
|
- <div class="amount_list flex align_center flex-between">
|
|
|
|
- <span class="amountName">折后金额</span>
|
|
|
|
- <span class="amount" style="color: #f0ad4e"
|
|
|
|
- v-if="info.settleAmount">¥{{toThousands(info.settleAmount,2)}}</span>
|
|
|
|
- <span class="amount" style="color: #f0ad4e" v-else>¥0.00</span>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div class="downLoadCon">
|
|
|
|
- <div class="downLoadTip">
|
|
|
|
- 单据明细Excel下载请点击下面的链接:
|
|
|
|
- </div>
|
|
|
|
- <div class="downLoadUrl" @click="downLoad">
|
|
|
|
- http://iscm.360arrow.com/bill/对账单明细.xls
|
|
|
|
- </div>
|
|
|
|
- <img v-if="info.billStatus != 'UNSETTLE'" src="./img/finishImg.png" alt="" class="finishImg">
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div class="orderCon flex flex-column"
|
|
|
|
- :style="{paddingTop:(info.discountAmount && info.discountAmount*1 !=0 ? '2.1rem':'1.5rem' )}">
|
|
|
|
- <div class="handleOrder flex flex-between align_center">
|
|
|
|
- <span>共{{saleList ? saleList.length : 0}}个销售单</span>
|
|
|
|
- <span v-if="!flag" @click="openAll">全部展开</span>
|
|
|
|
- <span v-else @click="openAll">全部关闭</span>
|
|
|
|
- </div>
|
|
|
|
- <div class="oederBox">
|
|
|
|
- <div v-for="(item,i) in saleList" :key="item.bizSn">
|
|
|
|
- <div class="oederList flex align_center" @click="openInfoList(i)">
|
|
|
|
- <div class="order-l">
|
|
|
|
- <div class="order-t flex align_center flex-between">
|
|
|
|
- <span>{{item.bizDate.substr(0,10)}}</span>
|
|
|
|
- <span>{{item.bizNo}}</span>
|
|
|
|
- </div>
|
|
|
|
- <div class="order-b flex align_center flex-between">
|
|
|
|
- <div>应付:¥{{toThousands(item.bizAmount,2)}}</div>
|
|
|
|
- <div>已付:¥{{toThousands(item.settledAmount,2)}}</div>
|
|
|
|
- <div>
|
|
|
|
- 待付:<span>¥{{item.unsettleAmount ? toThousands(item.unsettleAmount,2): 0}}</span>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div class="order-r">
|
|
|
|
- <img src="./img/close.png" alt="" v-if="!item.isShow">
|
|
|
|
- <img src="./img/open.png" alt="" v-else>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div class="otherList" v-show="item.isShow">
|
|
|
|
- <div class="list" v-for="(con,j) in item.list" :key="con.id">
|
|
|
|
- <div class="list-t flex align_center flex-between">
|
|
|
|
- <span>{{con.dealerProductEntity.code}}</span>
|
|
|
|
- <span>¥{{con.price?toThousands(con.price,2):0}}</span>
|
|
|
|
- </div>
|
|
|
|
- <div class="list-b flex align_center flex-between">
|
|
|
|
- <div>
|
|
|
|
- {{con.dealerProductEntity.productBrandName}}{{con.dealerProductEntity.productTypeName3}}
|
|
|
|
- </div>
|
|
|
|
- <div>x{{con.qty}}</div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </body>
|
|
|
|
- <script>
|
|
|
|
- new Vue({
|
|
|
|
- el: '#app',
|
|
|
|
- data: {
|
|
|
|
- ajaxUrl: 'http://192.168.0.103:8503/qpls-md/',
|
|
|
|
- saleList: [],
|
|
|
|
- saleDetailList: [],
|
|
|
|
- info: {},
|
|
|
|
- flag: false
|
|
|
|
- },
|
|
|
|
- created() {
|
|
|
|
- this.loadData()
|
|
|
|
- },
|
|
|
|
- methods: {
|
|
|
|
- loadData() {
|
|
|
|
- const ajaxData = {
|
|
|
|
- verifySn: this.getUrlParam(1),
|
|
|
|
- tenantId: this.getUrlParam(0)
|
|
|
|
- }
|
|
|
|
- axios.post(this.ajaxUrl + 'verify/findBySn', ajaxData).then((res) => {
|
|
|
|
- this.info = res.data.data
|
|
|
|
- document.title = res.data.data.dealerName
|
|
|
|
- res.data.data.detailList.forEach(item => {
|
|
|
|
- item.isShow = false
|
|
|
|
- item.list = []
|
|
|
|
- })
|
|
|
|
- this.saleList = res.data.data.detailList
|
|
|
|
-
|
|
|
|
- this.getALlList(res.data.data.detailList)
|
|
|
|
- }).catch((error) => {
|
|
|
|
- console.log(error)
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- handleShow(con, i) {
|
|
|
|
- const req_data = {
|
|
|
|
- salesBillSn: con.bizSn
|
|
|
|
- }
|
|
|
|
- axios.post(this.ajaxUrl + 'salesDetail/queryList', req_data).then((res) => {
|
|
|
|
- this.saleList[i].list = res.data.data
|
|
|
|
- }).catch((error) => {
|
|
|
|
- console.log(error)
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- openInfoList(i) {
|
|
|
|
- this.saleList[i].isShow = !this.saleList[i].isShow
|
|
|
|
- this.saleList.splice()
|
|
|
|
- },
|
|
|
|
- downLoad() {
|
|
|
|
- window.location.href = this.ajaxUrl + 'verify/exportExcel?verifySn=' + this.getUrlParam(1) +
|
|
|
|
- '&dealerSn=' + this.getUrlParam(0)
|
|
|
|
- },
|
|
|
|
- getUrlParam(index) {
|
|
|
|
- let urlArr = window.location.search.substr(1).split('&');
|
|
|
|
- return urlArr[index] // 返回参数值
|
|
|
|
- },
|
|
|
|
- openAll() {
|
|
|
|
- this.flag = !this.flag
|
|
|
|
- this.saleList.forEach((item, i) => {
|
|
|
|
- if (this.flag) {
|
|
|
|
- item.isShow = true
|
|
|
|
- } else {
|
|
|
|
- item.isShow = false
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- getALlList(list) {
|
|
|
|
- list.forEach((item, i) => {
|
|
|
|
- this.handleShow(item, i)
|
|
|
|
- })
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- </script>
|
|
|
|
|
|
+ <head>
|
|
|
|
+ <meta charset="UTF-8">
|
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
+ <title>对账单</title>
|
|
|
|
+ <link rel="stylesheet" href="./css/common.css">
|
|
|
|
+ <script src="./js/resize.js"></script>
|
|
|
|
+ <script src="./js/moent.min.js"></script>
|
|
|
|
+ <script src="./js/vue.min.js"></script>
|
|
|
|
+ <script src="./js/axios.min.js"></script>
|
|
|
|
+ <style>
|
|
|
|
+ [v-cloak] {
|
|
|
|
+ display: none
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .content {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100vh;
|
|
|
|
+ background: #f3f3f3;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .head {
|
|
|
|
+ /* 头部 */
|
|
|
|
+ background: #848484;
|
|
|
|
+ padding: .3rem .3rem 1rem;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ color: #fff;
|
|
|
|
+ position: relative;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .shareTime {
|
|
|
|
+ text-align: center;
|
|
|
|
+ margin-bottom: .2rem;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .tip {
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .tipDesc {
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ font-size: .24rem;
|
|
|
|
+ line-height: .5rem;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .orderInfo {
|
|
|
|
+ background: #fff;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ padding: .2rem;
|
|
|
|
+ width: calc(100% - .4rem);
|
|
|
|
+ border-radius: .3rem;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ position: absolute;
|
|
|
|
+ bottom: -1.9rem;
|
|
|
|
+ left: .2rem;
|
|
|
|
+ color: #333;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .downLoadTip,
|
|
|
|
+ .downLoadUrl {
|
|
|
|
+ max-width: 83%;
|
|
|
|
+ font-size: .25rem;
|
|
|
|
+ word-wrap: break-word;
|
|
|
|
+ white-space: normal;
|
|
|
|
+ word-break: break-all;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .downLoadTip {
|
|
|
|
+ margin-top: .2rem;
|
|
|
|
+ line-height: .4rem;
|
|
|
|
+ color: #999;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .downLoadUrl {
|
|
|
|
+ color: #007aff;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .amount {
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .amountName {
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .handleOrder {
|
|
|
|
+ color: #999;
|
|
|
|
+ padding: 0rem .2rem .2rem;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .handleOrder span:last-child {
|
|
|
|
+ color: #007aff;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /* 滚动盒子 */
|
|
|
|
+ .oederBox {
|
|
|
|
+ flex-grow: 1;
|
|
|
|
+ overflow: auto;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .oederList {
|
|
|
|
+ background: #fff;
|
|
|
|
+ border-bottom: .01rem solid #e0e0e0;
|
|
|
|
+ padding: .2rem;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .order-l {
|
|
|
|
+ flex: 1;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .order-t,
|
|
|
|
+ .order-b {
|
|
|
|
+ font-size: .12rem;
|
|
|
|
+ color: #999;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .order-t span:first-child {
|
|
|
|
+ color: #333;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .order-b,
|
|
|
|
+ .list-b {
|
|
|
|
+ line-height: .5rem;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .order-b span {
|
|
|
|
+ color: #f0ad4e;
|
|
|
|
+ vertical-align: middle;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .order-r img {
|
|
|
|
+ width: .5rem;
|
|
|
|
+ height: .5rem;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ object-fit: contain;
|
|
|
|
+ margin-left: .2rem;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /* 折叠列表 */
|
|
|
|
+ .otherList {
|
|
|
|
+ width: 100%;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ padding-left: .4rem;
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .list {
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ padding: .2rem;
|
|
|
|
+ border-bottom: .01rem solid #e0e0e0;
|
|
|
|
+ font-size: .12rem;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .list:last-child {
|
|
|
|
+ border-bottom: 0 solid #e0e0e0;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .list-b div:first-child {
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ width: 70%;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .list-b {
|
|
|
|
+ color: #999;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .downLoadCon {
|
|
|
|
+ position: relative;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .finishImg {
|
|
|
|
+ width: 1rem;
|
|
|
|
+ height: 1rem;
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: .06rem;
|
|
|
|
+ bottom: -.1rem;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .amount_list {
|
|
|
|
+ margin-bottom: 0.06rem;
|
|
|
|
+ }
|
|
|
|
+ </style>
|
|
|
|
+ </head>
|
|
|
|
+
|
|
|
|
+ <body>
|
|
|
|
+ <div id="app" class="content flex flex-column">
|
|
|
|
+ <div class="head">
|
|
|
|
+ <div class="shareTime">
|
|
|
|
+ 分享时间:{{info.createDate}}
|
|
|
|
+ </div>
|
|
|
|
+ <div class="tip" v-if="info.customer">
|
|
|
|
+ 尊敬的“{{info.customer.customerName || '--'}}”,您好!
|
|
|
|
+ </div>
|
|
|
|
+ <div class="tipDesc">
|
|
|
|
+ 以下是您在本店的未结账单,请查阅。
|
|
|
|
+ </div>
|
|
|
|
+ <div class="orderInfo"
|
|
|
|
+ :style="{bottom:(info.discountAmount && info.discountAmount*1 !=0 ? '-1.9rem':'-1.3rem' )}">
|
|
|
|
+ <div class="amount_list flex align_center flex-between">
|
|
|
|
+ <span class="amountName">货款金额</span>
|
|
|
|
+ <span class="amount" v-if="info.totalAmount"
|
|
|
|
+ :style="{color:!info.discountAmount? '#f0ad4e':'#333333'}">¥{{toThousands(info.totalAmount,2)}}</span>
|
|
|
|
+ <span class="amount" v-else :style="{color:!info.discountAmount ? '#f0ad4e':'#333333'}">¥0.00</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div v-if="info.discountAmount && info.discountAmount*1!=0">
|
|
|
|
+ <div class="amount_list flex align_center flex-between">
|
|
|
|
+ <span class="amountName">折让金额</span>
|
|
|
|
+ <span class="amount" v-if="info.discountAmount">-¥{{toThousands(info.discountAmount,2)}}</span>
|
|
|
|
+ <span class="amount" v-else>¥0.00</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="amount_list flex align_center flex-between">
|
|
|
|
+ <span class="amountName">折后金额</span>
|
|
|
|
+ <span class="amount" style="color: #f0ad4e"
|
|
|
|
+ v-if="info.settleAmount">¥{{toThousands(info.settleAmount,2)}}</span>
|
|
|
|
+ <span class="amount" style="color: #f0ad4e" v-else>¥0.00</span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="downLoadCon">
|
|
|
|
+ <div class="downLoadTip">
|
|
|
|
+ 单据明细Excel下载请点击下面的链接:
|
|
|
|
+ </div>
|
|
|
|
+ <div class="downLoadUrl" @click="downLoad">
|
|
|
|
+ http://iscm.360arrow.com/bill/对账单明细.xls
|
|
|
|
+ </div>
|
|
|
|
+ <img v-if="info.billStatus != 'UNSETTLE'" src="./img/finishImg.png" alt="" class="finishImg">
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="orderCon flex flex-column"
|
|
|
|
+ :style="{paddingTop:(info.discountAmount && info.discountAmount*1 !=0 ? '2.1rem':'1.5rem' )}">
|
|
|
|
+ <div class="handleOrder flex flex-between align_center">
|
|
|
|
+ <span>共{{saleList ? saleList.length : 0}}个销售单</span>
|
|
|
|
+ <span v-if="!flag" @click="openAll">全部展开</span>
|
|
|
|
+ <span v-else @click="openAll">全部关闭</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="oederBox">
|
|
|
|
+ <div v-for="(item,i) in saleList" :key="item.bizSn">
|
|
|
|
+ <div class="oederList flex align_center" @click="openInfoList(i)">
|
|
|
|
+ <div class="order-l">
|
|
|
|
+ <div class="order-t flex align_center flex-between">
|
|
|
|
+ <span>{{item.bizDate.substr(0,10)}}</span>
|
|
|
|
+ <span>{{item.bizNo}}</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="order-b flex align_center flex-between">
|
|
|
|
+ <div>应付:¥{{toThousands(item.bizAmount,2)}}</div>
|
|
|
|
+ <div>已付:¥{{toThousands(item.settledAmount,2)}}</div>
|
|
|
|
+ <div>
|
|
|
|
+ 待付:<span>¥{{item.unsettleAmount ? toThousands(item.unsettleAmount,2): 0}}</span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="order-r">
|
|
|
|
+ <img src="./img/close.png" alt="" v-if="!item.isShow">
|
|
|
|
+ <img src="./img/open.png" alt="" v-else>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="otherList" v-show="item.isShow">
|
|
|
|
+ <div class="list" v-for="(con,j) in item.list" :key="con.id">
|
|
|
|
+ <div class="list-t flex align_center flex-between">
|
|
|
|
+ <span>{{con.dealerProductEntity.code}}</span>
|
|
|
|
+ <span>¥{{con.price?toThousands(con.price,2):0}}</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="list-b flex align_center flex-between">
|
|
|
|
+ <div>
|
|
|
|
+ {{con.dealerProductEntity.productBrandName}}{{con.dealerProductEntity.productTypeName3}}
|
|
|
|
+ </div>
|
|
|
|
+ <div>x{{con.qty}}</div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </body>
|
|
|
|
+ <script>
|
|
|
|
+ new Vue({
|
|
|
|
+ el: '#app',
|
|
|
|
+ data: {
|
|
|
|
+ ajaxUrl: 'http://p.iscm.360arrow.com/qpls-md/',
|
|
|
|
+ saleList: [],
|
|
|
|
+ saleDetailList: [],
|
|
|
|
+ info: {},
|
|
|
|
+ flag: false
|
|
|
|
+ },
|
|
|
|
+ created () {
|
|
|
|
+ this.ajaxUrl = window.location.origin + '/qpls-md/'
|
|
|
|
+ console.log('请求地址:', window.location.origin + '/qpls-md/')
|
|
|
|
+ this.loadData()
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ loadData () {
|
|
|
|
+ const ajaxData = {
|
|
|
|
+ verifySn: this.getUrlParam(1),
|
|
|
|
+ tenantId: this.getUrlParam(0)
|
|
|
|
+ }
|
|
|
|
+ axios.post(this.ajaxUrl + 'verify/findBySn', ajaxData).then((res) => {
|
|
|
|
+ this.info = res.data.data
|
|
|
|
+ document.title = res.data.data.dealerName
|
|
|
|
+ res.data.data.detailList.forEach(item => {
|
|
|
|
+ item.isShow = false
|
|
|
|
+ item.list = []
|
|
|
|
+ })
|
|
|
|
+ this.saleList = res.data.data.detailList
|
|
|
|
+
|
|
|
|
+ this.getALlList(res.data.data.detailList)
|
|
|
|
+ }).catch((error) => {
|
|
|
|
+ console.log(error)
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ handleShow (con, i) {
|
|
|
|
+ const req_data = {
|
|
|
|
+ salesBillSn: con.bizSn
|
|
|
|
+ }
|
|
|
|
+ axios.post(this.ajaxUrl + 'salesDetail/queryList', req_data).then((res) => {
|
|
|
|
+ this.saleList[i].list = res.data.data
|
|
|
|
+ }).catch((error) => {
|
|
|
|
+ console.log(error)
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ openInfoList (i) {
|
|
|
|
+
|
|
|
|
+ this.saleList[i].isShow = !this.saleList[i].isShow
|
|
|
|
+ this.flag = this.saleList.every(item=>{return item.isShow})
|
|
|
|
+ this.saleList.splice()
|
|
|
|
+ },
|
|
|
|
+ downLoad () {
|
|
|
|
+ window.location.href = this.ajaxUrl + 'verify/exportExcel?verifySn=' + this.getUrlParam(1) +
|
|
|
|
+ '&dealerSn=' + this.getUrlParam(0)
|
|
|
|
+ },
|
|
|
|
+ getUrlParam (index) {
|
|
|
|
+ const urlArr = window.location.search.substr(1).split('&')
|
|
|
|
+ let newArr = urlArr.map(item=>{return item.replace('=','')})
|
|
|
|
+ return newArr[index] // 返回参数值
|
|
|
|
+ },
|
|
|
|
+ openAll () {
|
|
|
|
+ this.flag = !this.flag
|
|
|
|
+ this.saleList.forEach((item, i) => {
|
|
|
|
+ if (this.flag) {
|
|
|
|
+ item.isShow = true
|
|
|
|
+ } else {
|
|
|
|
+ item.isShow = false
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ getALlList (list) {
|
|
|
|
+ list.forEach((item, i) => {
|
|
|
|
+ this.handleShow(item, i)
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ </script>
|
|
|
|
|
|
</html>
|
|
</html>
|