chenrui 2 gadi atpakaļ
vecāks
revīzija
3d0453a1a1
3 mainītis faili ar 310 papildinājumiem un 296 dzēšanām
  1. 1 0
      public/dzd/css/common.css
  2. 280 276
      public/dzd/index.html
  3. 29 20
      public/dzd/js/resize.js

+ 1 - 0
public/dzd/css/common.css

@@ -2,6 +2,7 @@
     margin:0;
     padding:0;
     font-size: 14px;
+	
 }
 .flex{
     display: -webkit-flex; 

+ 280 - 276
public/dzd/index.html

@@ -1,309 +1,313 @@
 <!DOCTYPE html>
 <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>{{userName}}-对账单</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>
-        .content {
-            width: 100%;
-            height: 100vh;
-            background: #f3f3f3;
-        }
+	<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
+			}
 
-        .head {
-            /* 头部 */
-            background: #848484;
-            padding: .3rem .2rem 1rem;
-            box-sizing: border-box;
-            color: #fff;
-            position: relative;
-        }
+			.content {
+				width: 100%;
+				height: 100vh;
+				background: #f3f3f3;
+			}
 
-        .shareTime {
-            font-size: .12rem;
-            text-align: center;
-            margin-bottom: .2rem;
-        }
+			.head {
+				/* 头部 */
+				background: #848484;
+				padding: .3rem .3rem 1rem;
+				box-sizing: border-box;
+				color: #fff;
+				position: relative;
+			}
 
-        .tip {
-            font-weight: bold;
-        }
+			.shareTime {
+				text-align: center;
+				margin-bottom: .2rem;
+			}
 
-        .tipDesc {
-            font-weight: bold;
-            font-size: .12rem;
-            line-height: .5rem;
-        }
+			.tip {
+				font-weight: bold;
+			}
 
-        .orderInfo {
-            background: #fff;
-            box-sizing: border-box;
-            padding: .2rem;
-            width: calc(100% - .4rem);
-            border-radius: .3rem;
-            overflow: hidden;
-            position: absolute;
-            bottom: -1.1rem;
-            left: .2rem;
-            color: #333;
-        }
+			.tipDesc {
+				font-weight: bold;
+				font-size: .24rem;
+				line-height: .5rem;
+			}
 
-        .downLoadTip,
-        .downLoadUrl {
-            max-width: 83%;
-            font-size: .12rem;
-            word-wrap: break-word;
-            white-space: normal;
-            word-break: break-all;
-        }
+			.orderInfo {
+				background: #fff;
+				box-sizing: border-box;
+				padding: .2rem;
+				width: calc(100% - .4rem);
+				border-radius: .3rem;
+				overflow: hidden;
+				position: absolute;
+				bottom: -1.1rem;
+				left: .2rem;
+				color: #333;
+			}
 
-        .downLoadTip {
-            margin-top: .2rem;
-            line-height: .4rem;
-            color: #999;
-        }
+			.downLoadTip,
+			.downLoadUrl {
+				max-width: 83%;
+				font-size: .25rem;
+				word-wrap: break-word;
+				white-space: normal;
+				word-break: break-all;
+			}
 
-        .downLoadUrl {
-            color: #007aff;
-        }
+			.downLoadTip {
+				margin-top: .2rem;
+				line-height: .4rem;
+				color: #999;
+			}
 
-        .amount {
-            color: #f0ad4e;
-            font-weight: bold;
-        }
+			.downLoadUrl {
+				color: #007aff;
+			}
 
-        .handleOrder {
-            color: #999;
-            padding: 1.3rem .2rem .2rem;
-            font-size: .12rem;
-        }
+			.amount {
+				color: #f0ad4e;
+				font-weight: bold;
+			}
 
-        .handleOrder span:last-child {
-            color: #007aff;
-        }
+			.handleOrder {
+				color: #999;
+				padding: 1.3rem .2rem .2rem;
+			}
 
-        /* 滚动盒子 */
-        .oederBox {
-            flex-grow: 1;
-            overflow: auto;
-        }
+			.handleOrder span:last-child {
+				color: #007aff;
+			}
 
-        .oederList {
-            background: #fff;
-            border-bottom: .01rem solid #e0e0e0;
-            padding: .2rem;
-            box-sizing: border-box;
-        }
+			/* 滚动盒子 */
+			.oederBox {
+				flex-grow: 1;
+				overflow: auto;
+			}
 
-        .order-l {
-            flex: 1;
-        }
+			.oederList {
+				background: #fff;
+				border-bottom: .01rem solid #e0e0e0;
+				padding: .2rem;
+				box-sizing: border-box;
+			}
 
-        .order-t,
-        .order-b {
-            font-size: .12rem;
-            color: #999;
-        }
+			.order-l {
+				flex: 1;
+			}
 
-        .order-t span:first-child {
-            color: #333;
-        }
+			.order-t,
+			.order-b {
+				font-size: .12rem;
+				color: #999;
+			}
 
-        .order-b,
-        .list-b {
-            line-height: .5rem;
-        }
+			.order-t span:first-child {
+				color: #333;
+			}
 
-        .order-b span {
-            color: #f0ad4e;
-            vertical-align: middle;
-        }
+			.order-b,
+			.list-b {
+				line-height: .5rem;
+			}
 
-        .order-r img {
-            width: .5rem;
-            height: .5rem;
-            border-radius: 50%;
-            object-fit: contain;
-            margin-left: .2rem;
-        }
+			.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;
-        }
+			/* 折叠列表 */
+			.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 {
+				box-sizing: border-box;
+				padding: .2rem;
+				border-bottom: .01rem solid #e0e0e0;
+				font-size: .12rem;
+			}
 
-        .list:last-child {
-            border-bottom: 0 solid #e0e0e0;
-        }
+			.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 div:first-child {
+				text-overflow: ellipsis;
+				overflow: hidden;
+				white-space: nowrap;
+				width: 70%;
+			}
 
-        .list-b {
-            color: #999;
-        }
-    </style>
-</head>
+			.list-b {
+				color: #999;
+			}
+		</style>
+	</head>
 
-<body>
-    <div id="app" class="content flex flex-column">
-        <div class="head">
-            <div class="shareTime">
-                分享时间:2022-11-15 09:59:29
-            </div>
-            <div class="tip">
-                尊敬的“{{customerName}}”,您好!
-            </div>
-            <div class="tipDesc">
-                以下是您2022-11-01至2022-11-30在本店的对账单,请查阅。
-            </div>
-            <div class="orderInfo">
-                <div class="flex align_center flex-between">
-                    <span>欠款金额</span>
-                    <span class="amount">¥160.00</span>
-                </div>
-                <div class="downLoadTip">
-                    单据明细Excel下载请点击下面的链接:
-                </div>
-                <div class="downLoadUrl" @click="downLoad">
-                    http://iscm.360arrow.com/bill/202211150004.xls
-                </div>
-            </div>
-        </div>
-        <div class="orderCon flex flex-column">
-            <div class="handleOrder flex flex-between align_center">
-                <span>共{{saleList.length}}个销售单</span>
-                <span>全部展开</span>
-            </div>
-            <div class="oederBox">
-                <div class="oederList flex align_center" v-for="(item,i) in saleList" :key="item.bizSn">
-                    <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>应付:¥{{item.bizAmount ||0}}</div>
-                            <div>已付:¥{{item.settledAmount | 0}}</div>
-                            <div>欠款:<span>¥{{item.unsettleAmount|| 0}}</span></div>
-                        </div>
-                    </div>
-                    <div class="order-r" @click="handleShow">
-                        <img src="./img/close.png" alt="" v-if="!isShow">
-                        <img src="./img/open.png" alt="" v-else>
-                    </div>
-                </div>
-                <div class="otherList" v-if="isShow">
-                    <div class="list">
-                        <div class="list-t flex align_center flex-between">
-                            <span>JA-11070N</span>
-                            <span>¥40.00</span>
-                        </div>
-                        <div class="list-b flex align_center flex-between">
-                            <div>箭牌空气滤清器 07款丰田新皇冠207款丰田新皇冠2.5 / 3.0车用</div>
-                            <div>x2</div>
-                        </div>
-                    </div>
-                    <div class="list">
-                        <div class="list-t flex align_center flex-between">
-                            <span>JA-11070N</span>
-                            <span>¥40.00</span>
-                        </div>
-                        <div class="list-b flex align_center flex-between">
-                            <div>箭牌空气滤清器 07款丰田新皇冠2.5 / 3.0车用</div>
-                            <div>x2</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</body>
-<script>
-	
-    new Vue({
-        el: '#app',
-        data: {
-            isShow:false,
-			// ajaxUrl:'http://192.168.0.215:8503/qpls-md/',
-      ajaxUrl:'http://p.iscm.360arrow.com/qpls-md/',
-			// customerName:'',
-			// userName:'',
-			saleList:[],
-			customerName:'名字名字',
-			customerSn:'437705264826884096',
-			startTime:'2022-11-01 00:00:00',
-			endTime:'2022-11-30 23:59:59',
-        },
-		created() {
-			// let dataInfo=JSON.parse(this.getUrlParam(data));
-			// this.customerName = dataInfo.customerName;
-			// this.userName  = dataInfo.userName;
-			// this.newObj= dataInfo;
-			// this.loadData(dataInfo);
-		},
-        methods:{
-			loadData(item){
-				let ajaxData={
-					targetSn: item.customerSn,
-					bizBeginDate: item.startTime,
-					bizEndDate: item.endTime
-				}
-				axios.post(this.ajaxUrl+'verify/queryUnsettleSaleList',ajaxData).then((res)=> {
-				   this.saleList=res.data;
-				}).catch((error)=> {
-				    console.log(error);
-				});
+	<body>
+		<div id="app" class="content flex flex-column">
+			<div class="head">
+				<div class="shareTime">
+					分享时间:{{info.createDate}}
+				</div>
+				<div class="tip">
+					尊敬的“{{info.customer.customerName}}”,您好!
+				</div>
+				<div class="tipDesc">
+					以下是您{{time}}在本店的对账单,请查阅。
+				</div>
+				<div class="orderInfo">
+					<div class="flex align_center flex-between">
+						<span>欠款金额</span>
+						<span class="amount">¥{{toThousands(info.totalAmount,2)}}</span>
+					</div>
+					<div class="downLoadTip">
+						单据明细Excel下载请点击下面的链接:
+					</div>
+					<div class="downLoadUrl" @click="downLoad">
+						http://iscm.360arrow.com/bill/对账单明细.xls
+					</div>
+				</div>
+			</div>
+			<div class="orderCon flex flex-column">
+				<div class="handleOrder flex flex-between align_center">
+					<span>共{{saleList.length}}个销售单</span>
+					<span>全部展开</span>
+				</div>
+				<div class="oederBox">
+					<div class="oederList flex align_center" v-for="(item,i) in saleList" :key="item.bizSn">
+						<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>应付:¥{{item.bizAmount ||0}}</div>
+								<div>已付:¥{{item.settledAmount | 0}}</div>
+								<div>欠款:<span>¥{{toThousands(item.unsettleAmount,2)|| 0}}</span></div>
+							</div>
+						</div>
+						<div class="order-r" @click="handleShow(item)">
+							<img src="./img/close.png" alt="" v-if="!isShow">
+							<img src="./img/open.png" alt="" v-else>
+						</div>
+					</div>
+					<div class="otherList" v-if="isShow">
+						<div class="list" v-for="(con,j) in saleDetailList" :key="con.id">
+							<div class="list-t flex align_center flex-between">
+								<span>{{con.productCode}}</span>
+								<span>¥{{toThousands(con.price,2)}}</span>
+							</div>
+							<div class="list-b flex align_center flex-between">
+								<div>{{con.productName}}</div>
+								<div>x{{con.qty}}</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</body>
+	<script>
+		new Vue({
+			el: '#app',
+			data: {
+				isShow: false,
+				ajaxUrl: 'http://192.168.0.215:8503/qpls-md/',
+				customerName: '',
+				userName: '',
+				saleList: [],
+				saleDetailList: [],
+				info:{},
+				time:''
 			},
-            handleShow(){
-                this.isShow = !this.isShow
-            },
-			getUrlParam(name){
-				var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
-				var r = window.location.search.substr(1).match(reg);  //匹配目标参数
-				if (r!=null) return unescape(r[2]); return null; //返回参数值
+			created() {
+				document.title = '这是标题';
+				this.loadData();
 			},
-			downLoad(){
-				let ajaxData={
-					targetSn: this.customerSn,
-					bizBeginDate: this.startTime,
-					bizEndDate: this.endTime,
-					dealerSn:"3429"
+			methods: {
+				loadData(item) {
+					let ajaxData = {
+						 verifySn:this.getUrlParam(verifySn),
+						 dealerSn:this.getUrlParam(userSn)
+					}
+					axios.post(this.ajaxUrl + 'verify/findBySn', ajaxData).then((res) => {
+						this.info = res.data;
+						this.saleList = res.data.detailList;
+						if(res.data.bizBeginDate && res.data.bizEndDate){
+							this.time = res.data.bizBeginDate.split(' ')[0] +'至'+res.data.bizEndDate.split(' ')[0]
+						}
+					}).catch((error) => {
+						console.log(error);
+					});
+				},
+				handleShow(con) {
+					let req_data = {
+						bizSn: con.bizSn
+					}
+					axios.post(this.ajaxUrl + 'salesDetail/queryList', req_data).then((res) => {
+						this.saleDetailList = res.data;
+					}).catch((error) => {
+						console.log(error);
+					});
+					this.isShow = !this.isShow
+				},
+				downLoad() {
+					let ajaxData = {
+						targetSn: this.customerSn,
+						bizBeginDate: this.startTime,
+						bizEndDate: this.endTime,
+						dealerSn: this.getUrlParam(userSn)
+					}
+					axios.get(this.ajaxUrl + 'verify/exportExcel', {
+						params: ajaxData
+					}, {
+						responseType: 'blob',
+						dataType: "jsonp",
+						jsonp: "callback"
+					}).then((res) => {
+						console.log('res', res)
+						if (res.status == 200) {
+							downloadExcel(res.data, '对账单明细')
+						}
+					}).catch((error) => {
+						console.log(error);
+					});
+
+				},
+				getUrlParam(name) {
+					var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
+					var r = window.location.search.substr(1).match(reg); //匹配目标参数
+					if (r != null) return unescape(r[2]);
+					return null; //返回参数值
 				}
-				axios.get(this.ajaxUrl+'verify/exportExcel',{params:ajaxData},{responseType: 'blob', dataType:"jsonp",jsonp:"callback"}).then((res)=> {
-					console.log('res',res)
-				  if(res.status == 200){
-					  downloadExcel(res.data, '对账单明细')
-				  }
-				}).catch((error)=> {
-				    console.log(error);
-				});
-				
 			}
-        }
-    })
-</script>
+		})
+	</script>
 
-</html>
+</html>

+ 29 - 20
public/dzd/js/resize.js

@@ -1,20 +1,22 @@
 (function(doc, win) {
-    var docEl = doc.documentElement,
-        resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
-        recalc = function() {
-            if (docEl.clientWidth > 750) {
-                docEl.style.fontSize = "100px";
-                doc.getElementById("app").style.width = "750px";
-            } else {
-                var width = docEl.clientWidth / 7.5;
-                docEl.style.fontSize = width + "px";
-                doc.getElementById("app").style.width = "auto";
-            }
-        };
-    if (!doc.addEventListener) return;
-    win.addEventListener(resizeEvt, recalc, false);
-    doc.addEventListener("DOMContentLoaded", recalc, false);
-})(document, window);
+   var docEl = doc.documentElement,
+    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
+    recalc = function() {
+     var clientWidth = docEl.clientWidth;
+     if(!clientWidth) return;
+     if(clientWidth >= 1080) {
+      docEl.style.fontSize = '100px';
+     } else {
+      docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
+     }
+    };
+
+   if(!doc.addEventListener) return;
+   win.addEventListener(resizeEvt, recalc, false);
+   doc.addEventListener('DOMContentLoaded', recalc, false);
+   var docEl = document.documentElement;
+   var clientWidth = docEl.clientHeight;
+  })(document, window);
 
 
 // 导出
@@ -24,16 +26,12 @@ function  downloadExcel(data, fileName) {
   const fname = fileName + a
   const blob = new Blob([data], { type: 'application/vnd.ms-excel' })
   if (window.navigator && window.navigator.msSaveOrOpenBlob) {
-	   console.log('22222')
     navigator.msSaveBlob(blob, fname + '.xlsx')
   } else {
     const link = document.createElement('a')
     link.style.display = 'none'
     var href = URL.createObjectURL(blob)
     link.href = href
-   alert('111111')
-	// window.location.href = 'https://jg-ocs.oss-cn-beijing.aliyuncs.com/templ/promo/sendOutOrderImport.xlsx'
-	
     link.setAttribute('download', fname + '.xlsx')
 
     document.body.appendChild(link)
@@ -42,3 +40,14 @@ function  downloadExcel(data, fileName) {
     window.URL.revokeObjectURL(href) // 释放掉blob对象
   }
 }
+
+function toThousands (num, decimal) {
+  if (decimal) {
+    num = formatDecimal(num, decimal)
+  }
+  return num.toString().replace(/\d+/, function (n) { // 先提取整数部分
+    return n.replace(/(\d)(?=(\d{3})+$)/g, function ($1) {
+      return $1 + ','
+    })
+  })
+}