From dd6abda8baed276df96eff83e7ba386296e84b00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E5=B9=B3=E8=89=BA?= <52643018@qq.com>
Date: Tue, 10 Aug 2021 16:59:43 +0800
Subject: [PATCH] =?UTF-8?q?[=E4=BF=AE=E5=A4=8D]=20table=E5=B7=A6=E6=BB=91?=
 =?UTF-8?q?=E5=9B=9E=E4=B8=8D=E5=8E=BB=E7=9A=84=E9=97=AE=E9=A2=98(?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6scroll-left=E8=B5=8B=E5=80=BC=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98)=20[=E4=BF=AE=E5=A4=8D]=20table=E6=9C=89=E5=A4=9A?=
 =?UTF-8?q?=E4=B8=AA=E7=9A=84=E6=97=B6=E5=80=99=E5=8F=AA=E6=9C=89=E7=AC=AC?=
 =?UTF-8?q?=E4=B8=80=E4=B8=AA=E8=83=BD=E6=BB=9A=E5=8A=A8(table=E7=B1=BB?=
 =?UTF-8?q?=E5=90=8D=E4=B8=80=E6=A0=B7=EF=BC=8C=E5=AF=BC=E8=87=B4dom?=
 =?UTF-8?q?=E6=9F=A5=E6=89=BE=E6=97=B6=E5=8F=AA=E8=83=BD=E5=8F=96=E5=88=B0?=
 =?UTF-8?q?=E7=AC=AC=E4=B8=80=E4=B8=AA=EF=BC=8C=E5=B7=B2=E5=8A=A0=E5=85=A5?=
 =?UTF-8?q?=E9=9A=8F=E6=9C=BA=E5=94=AF=E4=B8=80class=E6=A0=87=E8=AF=86)=20?=
 =?UTF-8?q?[=E4=BC=98=E5=8C=96]=20=E4=BE=9B=E5=BA=94=E5=95=86=E7=94=B3?=
 =?UTF-8?q?=E8=AF=B7=E6=8A=A5=E4=BB=B7=E6=90=9C=E7=B4=A2=E6=A1=86=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 canteen/components/wyb-table/wyb-table.vue  | 34 ++++++++++++++++-----
 supplier/components/wyb-table/wyb-table.vue | 33 +++++++++++++++-----
 supplier/pages/offer/index.vue              |  2 +-
 3 files changed, 53 insertions(+), 16 deletions(-)

diff --git a/canteen/components/wyb-table/wyb-table.vue b/canteen/components/wyb-table/wyb-table.vue
index fbe5039..9791ca8 100644
--- a/canteen/components/wyb-table/wyb-table.vue
+++ b/canteen/components/wyb-table/wyb-table.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="wyb-table-box">
+	<view class="wyb-table-box" :class="randomClass">
 		<view v-if="loading" class="wyb-table-loading-box" :style="{
 			'max-width': width === 'auto' ? screenWidth : width,
 			'max-height': height === 'auto' ? '300rpx' : height,
@@ -206,7 +206,6 @@
 <script>
 	import Pinyin from './js/characterToPinyin.js'
 	import {isEqual} from './js/objEqual.js'
-	let timer = null;
 	export default {
 		data() {
 			return {
@@ -226,6 +225,8 @@
 					checkType: this.enableCheck,
 					data: []
 				},
+				timer: null,
+				randomClass: "x"+ Math.random().toString(32).substr(2),
 				chars: '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
 			}
 		},
@@ -766,24 +767,41 @@
 			}
 			this.autoScrollView();
 		},
+		destroyed(){
+			if(this.timer){
+				clearInterval(this.timer);
+				this.timer = null;
+			}
+		},
 		methods: {
 			// 页面初次加载，判断是否自动滚动至input输入框所在的位置
 			autoScrollView(){
 				try{
 					// #ifdef H5
-					if(this.$props.scrollToInput){
+					let that = this;
+					if(that.$props.scrollToInput){
 						setTimeout(function(){
 							//  完整选取dom .wyb-table-scroll-view .wyb-table-content .wyb-table-content-line .wyb-table-content-item input
-							let tabView = document.querySelector('.wyb-table-scroll-view'); // 获取第一层大对象，table
+							let tabView = document.querySelector('.'+ that.randomClass +' .wyb-table-scroll-view'); // 获取第一层大对象，table
 							let tabContent = tabView.querySelector('.wyb-table-content'); // 获取第二层，table的content部分
 							let contentLine = tabContent.querySelector('.wyb-table-content-line'); // 获取第三层，获取内容列
 							let contentItem = contentLine.querySelector('.wyb-table-content-item input'); // 获取第四层，内容单元格
 							let offsetWidth = contentItem.offsetParent.offsetWidth;
-							let offsetLeft = contentItem.offsetParent.offsetLeft - offsetWidth - 20;
-							timer = setInterval(function(){
+							let offsetLeft = contentItem.offsetParent.offsetLeft;
+							let scrollLeft = offsetLeft - offsetWidth - 20;
+							if(that.timer){
+								clearInterval(that.timer);
+								that.timer = null;
+							}
+							if(scrollLeft <= 0){
+								return; // 判断含有input的元素是否在前面，是就不做滚动
+							}
+							that.timer = setInterval(function(){
+								let currentScrollLeft = tabView.scrollLeft;
 								tabView.scrollLeft += 2;
-								if(tabView.scrollLeft >= offsetLeft){
-									clearInterval(timer);
+								if((tabView.scrollLeft >= scrollLeft) || currentScrollLeft == tabView.scrollLeft){
+									clearInterval(that.timer); // 判断相等是为了元素已经滚动到后面没法滚动了，scrollLeft赋值失败，导致计时器一直在跑
+									that.timer = null;
 								}
 							}, 2);
 						}, 1000)
diff --git a/supplier/components/wyb-table/wyb-table.vue b/supplier/components/wyb-table/wyb-table.vue
index cfa3ce1..b85a24b 100644
--- a/supplier/components/wyb-table/wyb-table.vue
+++ b/supplier/components/wyb-table/wyb-table.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="wyb-table-box">
+	<view class="wyb-table-box" :class="randomClass">
 		<!-- loading加载框 -->
 		<view v-if="loading" class="wyb-table-loading-box" :style="{
 			'max-width': width === 'auto' ? screenWidth : width,
@@ -230,6 +230,8 @@
 					checkType: this.enableCheck,
 					data: []
 				},
+				timer: null,
+				randomClass: "x"+ Math.random().toString(32).substr(2),
 				chars: '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
 			}
 		},
@@ -814,24 +816,41 @@
 			}
 			this.autoScrollView();
 		},
+		destroyed(){
+			if(this.timer){
+				clearInterval(this.timer);
+				this.timer = null;
+			}
+		},
 		methods: {
 			// 页面初次加载，判断是否自动滚动至input输入框所在的位置
 			autoScrollView(){
 				try{
 					// #ifdef H5
-					if(this.$props.scrollToInput){
+					let that = this;
+					if(that.$props.scrollToInput){
 						setTimeout(function(){
 							//  完整选取dom .wyb-table-scroll-view .wyb-table-content .wyb-table-content-line .wyb-table-content-item input
-							let tabView = document.querySelector('.wyb-table-scroll-view'); // 获取第一层大对象，table
+							let tabView = document.querySelector('.'+ that.randomClass +' .wyb-table-scroll-view'); // 获取第一层大对象，table
 							let tabContent = tabView.querySelector('.wyb-table-content'); // 获取第二层，table的content部分
 							let contentLine = tabContent.querySelector('.wyb-table-content-line'); // 获取第三层，获取内容列
 							let contentItem = contentLine.querySelector('.wyb-table-content-item input'); // 获取第四层，内容单元格
 							let offsetWidth = contentItem.offsetParent.offsetWidth;
-							let offsetLeft = contentItem.offsetParent.offsetLeft - offsetWidth - 20;
-							timer = setInterval(function(){
+							let offsetLeft = contentItem.offsetParent.offsetLeft;
+							let scrollLeft = offsetLeft - offsetWidth - 20;
+							if(that.timer){
+								clearInterval(that.timer);
+								that.timer = null;
+							}
+							if(scrollLeft <= 0){
+								return; // 判断含有input的元素是否在前面，是就不做滚动
+							}
+							that.timer = setInterval(function(){
+								let currentScrollLeft = tabView.scrollLeft;
 								tabView.scrollLeft += 2;
-								if(tabView.scrollLeft >= offsetLeft){
-									clearInterval(timer);
+								if((tabView.scrollLeft >= scrollLeft) || currentScrollLeft == tabView.scrollLeft){
+									clearInterval(that.timer); // 判断相等是为了元素已经滚动到后面没法滚动了，scrollLeft赋值失败，导致计时器一直在跑
+									that.timer = null;
 								}
 							}, 2);
 						}, 1000)
diff --git a/supplier/pages/offer/index.vue b/supplier/pages/offer/index.vue
index 6e5264f..7bcf0ee 100644
--- a/supplier/pages/offer/index.vue
+++ b/supplier/pages/offer/index.vue
@@ -476,7 +476,7 @@
 		color: #777;
 	}
 	.search-self {
-		background: rgb(228,228,228);
+		background: #f2f2f2;
 		padding: 10rpx 0 10rpx 20rpx;
 		border-radius: 40rpx;
 		font-size: 28rpx;