[fixbug] 移动端保费计算组件不能拖动

[fixbug] 保费计算组件resize后不重新计算位置
首页三语修复

 <template>
-	<div id="app" :lang="lang">
-		<v-header class="header"></v-header>
-		<main ref="container" class="main-container" :class="{'main-container-min-height':!initCss}">
-			<router-view />
-		</main>
-		<v-footer></v-footer>
-		<vhis-modal></vhis-modal>
-	</div>
+  <div id="app" :lang="lang">
+    <v-header class="header"></v-header>
+    <main ref="container" class="main-container" :class="{'main-container-min-height':!initCss}">
+      <router-view />
+    </main>
+    <v-footer></v-footer>
+    <vhis-modal></vhis-modal>
+  </div>
 </template>
 
 
@@ -49,8 +49,8 @@ export default {
       let deviceType = output.device.type;
       let isMobile = deviceType == "mobile";
       this.$store.commit("IS_MOBILE", isMobile);
-		},
-		// 设置用户Profile
+    },
+    // 设置用户Profile
     refreshProfile() {
       let userInfoStr = decodeURIComponent(getCookie("_user_profile"));
       if (userInfoStr) {
@@ -105,6 +105,10 @@ html {
   box-sizing: border-box;
 }
 
+* {
+  touch-action: pan-y;
+}
+
 body {
   font-size: $fontSize;
 }
@@ -438,8 +442,6 @@ textarea {
   }
 }
 
-
-
 .ql-editor {
   padding: 0px 0px !important;
 }

@@ -4,48 +4,108 @@ export default {
 		return {
 			slider: null, //滚动条DOM元素
 			thunk: null, //拖拽DOM元素
-			per: this.value || 0 //当前值
+			per: this.value || 0, //当前值
+
+			flags: false,
+			curWidth: 0,
+			disX: 0
 		};
 	},
 	methods: {
+		end(e) {
+			this.flags = false;
+		},
+		down(event) {
+			let _this = this;
+			var touch;
+			if (event.touches) {
+				touch = event.touches[0];
+			} else {
+				touch = event;
+			}
+			let e = touch;
+
+			_this.curWidth = parseInt(_this.width);
+			_this.disX = e.clientX;
+			_this.flags = true;
+		},
+		move(event) {
+			let _this = this;
+			if (_this.flags) {
+				var touch;
+				if (event.touches) {
+					touch = event.touches[0];
+				} else {
+					touch = event;
+				}
+				let e = touch;
+
+				let disX = _this.disX;
+				let width = _this.curWidth;
+
+				// 拖拽的时候获取的新width
+				var newWidth = e.clientX - disX + width;
+				// console.log("this.slider.offsetWidth:", this.slider.offsetWidth);
+				// console.log("this.thunk.offsetWidth:", this.thunk.offsetWidth);
+
+				// 拖拽的时候得到新的百分比
+				var scale = newWidth / _this.slider.offsetWidth;
+				_this.per = Math.ceil((_this.max - _this.min) * scale + _this.min);
+				_this.per = Math.max(_this.per, _this.min);
+				_this.per = Math.min(_this.per, _this.max);
+				_this.$emit("input", _this.per);
+			}
+
+		},
 		initData() {
 			var _this = this;
 			this.$nextTick(() => {
-				_this.slider = _this.$refs.slider;
-				_this.thunk = _this.$refs.trunk;
-				if (_this.thunk) {
-					_this.thunk.onmousedown = function (e) {
-						var width = parseInt(_this.width);
-						var disX = e.clientX;
-						document.onmousemove = function (e) {
-							// value, left, width
-							// 当value变化的时候，会通过计算属性修改left，width
 
-							// 拖拽的时候获取的新width
-							var newWidth = e.clientX - disX + width;
-							// 拖拽的时候得到新的百分比
-							var scale = newWidth / _this.slider.offsetWidth;
-							_this.per = Math.ceil((_this.max - _this.min) * scale + _this.min);
-							_this.per = Math.max(_this.per, _this.min);
-							_this.per = Math.min(_this.per, _this.max);
-							_this.$emit("input", _this.per);
-						};
-						document.onmouseup = function () {
-							document.onmousemove = document.onmouseup = null;
-						};
-						return false;
-					};
-				}
-			});
+				// 监听PC和移动端事件				
+				this.thunk.addEventListener("mousedown", (e) => {
+					event.preventDefault();
+					_this.down(e);
+				}, false);
+				this.thunk.addEventListener("touchstart", (e) => {
+					event.preventDefault();
+					_this.down(e);
+				}, false);
 
+				document.addEventListener("mousemove", (e) => {
+					event.preventDefault();
+					_this.move(e);
+				}, false);
 
+				document.addEventListener("touchmove", (e) => {
+					event.preventDefault();
+					_this.move(e);
+				}, false);
+
+				document.addEventListener("mouseup", (e) => {
+					event.preventDefault();
+					_this.end(e);
+				}, false);
+
+				document.addEventListener("touchend", (e) => {
+					event.preventDefault();
+					_this.end(e);
+				}, false);
+			});
 		}
 	},
 	//渲染到页面的时候
 	mounted() {
+		this.slider = this.$refs.slider;
+		this.thunk = this.$refs.trunk;
 		this.initData();
 		window.addEventListener('resize', () => {
 			this.initData();
+			// console.log("scale:", this.scale);
+
+			// 改per的值，强制刷新计算属性computed
+			let tempPer = this.per;
+			this.per = 0;
+			this.per = tempPer;
 		}, false);
 	},
 

 <template>
   <div class="slider" ref="slider">
     <div class="process" :style="{width}"></div>
-    <div class="thunk" ref="trunk" :style="{left}">
+    <div class="thunk" ref="trunk" :style="{left}" >
       <div class="tips">
         <span>{{per}}</span>
         <!-- <span>300</span> -->

@@ -534,7 +534,7 @@ export default {
 					element.index = idx;
 					element.describeList = element.describe.split("\n");
 				});
-				this.curTab = this.dataList[0];
+				this.curTab = this.dataList[0] || {};
 				this.bannerList = this.dataList;
 				this.bannerList.forEach(element => {
 					element.btns = element.btnDescribe;

@@ -270,11 +270,11 @@
                     <div class="line"></div>
                     <!-- 计算 -->
                     <div class="calculation">
-                      <div class="label">{{$t('index.quote.vhis.quotePerMonth')}}</div>
+                      <div class="label">{{$t('index.quote.genRich.quotePerMonth')}}</div>
                       <div class="value">$ <span class="price">{{sumAssured}}</span></div>
                     </div>
                     <!-- 提示 -->
-                    <div class="tips">{{$t('index.quote.vhis.tips')}}</div>
+                    <div class="tips">{{$t('index.quote.genRich.tips')}}</div>
                   </div>
                 </div>