Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
8d71fcc5 by simon
Options

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

[fixbug] 保费计算组件resize后不重新计算位置
首页三语修复
1 parent b6785196
Inline Side-by-side
Showing 5 changed files with 104 additions and 42 deletions
1 <template> 1 <template>
2 <div id="app" :lang="lang"> 2 <div id="app" :lang="lang">
3 <v-header class="header"></v-header> 3 <v-header class="header"></v-header>
4 <main ref="container" class="main-container" :class="{'main-container-min-height':!initCss}"> 4 <main ref="container" class="main-container" :class="{'main-container-min-height':!initCss}">
5 <router-view /> 5 <router-view />
6 </main> 6 </main>
7 <v-footer></v-footer> 7 <v-footer></v-footer>
8 <vhis-modal></vhis-modal> 8 <vhis-modal></vhis-modal>
9 </div> 9 </div>
10 </template> 10 </template>
11 11
12 12
...@@ -49,8 +49,8 @@ export default { ...@@ -49,8 +49,8 @@ export default {
49 let deviceType = output.device.type; 49 let deviceType = output.device.type;
50 let isMobile = deviceType == "mobile"; 50 let isMobile = deviceType == "mobile";
51 this.$store.commit("IS_MOBILE", isMobile); 51 this.$store.commit("IS_MOBILE", isMobile);
52 }, 52 },
53 // 设置用户Profile 53 // 设置用户Profile
54 refreshProfile() { 54 refreshProfile() {
55 let userInfoStr = decodeURIComponent(getCookie("_user_profile")); 55 let userInfoStr = decodeURIComponent(getCookie("_user_profile"));
56 if (userInfoStr) { 56 if (userInfoStr) {
...@@ -105,6 +105,10 @@ html { ...@@ -105,6 +105,10 @@ html {
105 box-sizing: border-box; 105 box-sizing: border-box;
106 } 106 }
107 107
108 * {
109 touch-action: pan-y;
110 }
111
108 body { 112 body {
109 font-size: $fontSize; 113 font-size: $fontSize;
110 } 114 }
...@@ -438,8 +442,6 @@ textarea { ...@@ -438,8 +442,6 @@ textarea {
438 } 442 }
439 } 443 }
440 444
441
442
443 .ql-editor { 445 .ql-editor {
444 padding: 0px 0px !important; 446 padding: 0px 0px !important;
445 } 447 }
......
...@@ -4,48 +4,108 @@ export default { ...@@ -4,48 +4,108 @@ export default {
4 return { 4 return {
5 slider: null, //滚动条DOM元素 5 slider: null, //滚动条DOM元素
6 thunk: null, //拖拽DOM元素 6 thunk: null, //拖拽DOM元素
7 per: this.value || 0 //当前值 7 per: this.value || 0, //当前值
8
9 flags: false,
10 curWidth: 0,
11 disX: 0
8 }; 12 };
9 }, 13 },
10 methods: { 14 methods: {
15 end(e) {
16 this.flags = false;
17 },
18 down(event) {
19 let _this = this;
20 var touch;
21 if (event.touches) {
22 touch = event.touches[0];
23 } else {
24 touch = event;
25 }
26 let e = touch;
27
28 _this.curWidth = parseInt(_this.width);
29 _this.disX = e.clientX;
30 _this.flags = true;
31 },
32 move(event) {
33 let _this = this;
34 if (_this.flags) {
35 var touch;
36 if (event.touches) {
37 touch = event.touches[0];
38 } else {
39 touch = event;
40 }
41 let e = touch;
42
43 let disX = _this.disX;
44 let width = _this.curWidth;
45
46 // 拖拽的时候获取的新width
47 var newWidth = e.clientX - disX + width;
48 // console.log("this.slider.offsetWidth:", this.slider.offsetWidth);
49 // console.log("this.thunk.offsetWidth:", this.thunk.offsetWidth);
50
51 // 拖拽的时候得到新的百分比
52 var scale = newWidth / _this.slider.offsetWidth;
53 _this.per = Math.ceil((_this.max - _this.min) * scale + _this.min);
54 _this.per = Math.max(_this.per, _this.min);
55 _this.per = Math.min(_this.per, _this.max);
56 _this.$emit("input", _this.per);
57 }
58
59 },
11 initData() { 60 initData() {
12 var _this = this; 61 var _this = this;
13 this.$nextTick(() => { 62 this.$nextTick(() => {
14 _this.slider = _this.$refs.slider;
15 _this.thunk = _this.$refs.trunk;
16 if (_this.thunk) {
17 _this.thunk.onmousedown = function (e) {
18 var width = parseInt(_this.width);
19 var disX = e.clientX;
20 document.onmousemove = function (e) {
21 // value, left, width
22 // 当value变化的时候，会通过计算属性修改left，width
23 63
24 // 拖拽的时候获取的新width 64 // 监听PC和移动端事件
25 var newWidth = e.clientX - disX + width; 65 this.thunk.addEventListener("mousedown", (e) => {
26 // 拖拽的时候得到新的百分比 66 event.preventDefault();
27 var scale = newWidth / _this.slider.offsetWidth; 67 _this.down(e);
28 _this.per = Math.ceil((_this.max - _this.min) * scale + _this.min); 68 }, false);
29 _this.per = Math.max(_this.per, _this.min); 69 this.thunk.addEventListener("touchstart", (e) => {
30 _this.per = Math.min(_this.per, _this.max); 70 event.preventDefault();
31 _this.$emit("input", _this.per); 71 _this.down(e);
32 }; 72 }, false);
33 document.onmouseup = function () {
34 document.onmousemove = document.onmouseup = null;
35 };
36 return false;
37 };
38 }
39 });
40 73
74 document.addEventListener("mousemove", (e) => {
75 event.preventDefault();
76 _this.move(e);
77 }, false);
41 78
79 document.addEventListener("touchmove", (e) => {
80 event.preventDefault();
81 _this.move(e);
82 }, false);
83
84 document.addEventListener("mouseup", (e) => {
85 event.preventDefault();
86 _this.end(e);
87 }, false);
88
89 document.addEventListener("touchend", (e) => {
90 event.preventDefault();
91 _this.end(e);
92 }, false);
93 });
42 } 94 }
43 }, 95 },
44 //渲染到页面的时候 96 //渲染到页面的时候
45 mounted() { 97 mounted() {
98 this.slider = this.$refs.slider;
99 this.thunk = this.$refs.trunk;
46 this.initData(); 100 this.initData();
47 window.addEventListener('resize', () => { 101 window.addEventListener('resize', () => {
48 this.initData(); 102 this.initData();
103 // console.log("scale:", this.scale);
104
105 // 改per的值，强制刷新计算属性computed
106 let tempPer = this.per;
107 this.per = 0;
108 this.per = tempPer;
49 }, false); 109 }, false);
50 }, 110 },
51 111
......
1 <template> 1 <template>
2 <div class="slider" ref="slider"> 2 <div class="slider" ref="slider">
3 <div class="process" :style="{width}"></div> 3 <div class="process" :style="{width}"></div>
4 <div class="thunk" ref="trunk" :style="{left}"> 4 <div class="thunk" ref="trunk" :style="{left}" >
5 <div class="tips"> 5 <div class="tips">
6 <span>{{per}}</span> 6 <span>{{per}}</span>
7 <!-- <span>300</span> --> 7 <!-- <span>300</span> -->
......
...@@ -534,7 +534,7 @@ export default { ...@@ -534,7 +534,7 @@ export default {
534 element.index = idx; 534 element.index = idx;
535 element.describeList = element.describe.split("\n"); 535 element.describeList = element.describe.split("\n");
536 }); 536 });
537 this.curTab = this.dataList[0]; 537 this.curTab = this.dataList[0] || {};
538 this.bannerList = this.dataList; 538 this.bannerList = this.dataList;
539 this.bannerList.forEach(element => { 539 this.bannerList.forEach(element => {
540 element.btns = element.btnDescribe; 540 element.btns = element.btnDescribe;
......
...@@ -270,11 +270,11 @@ ...@@ -270,11 +270,11 @@
270 <div class="line"></div> 270 <div class="line"></div>
271 <!-- 计算 --> 271 <!-- 计算 -->
272 <div class="calculation"> 272 <div class="calculation">
273 <div class="label">{{$t('index.quote.vhis.quotePerMonth')}}</div> 273 <div class="label">{{$t('index.quote.genRich.quotePerMonth')}}</div>
274 <div class="value">$ <span class="price">{{sumAssured}}</span></div> 274 <div class="value">$ <span class="price">{{sumAssured}}</span></div>
275 </div> 275 </div>
276 <!-- 提示 --> 276 <!-- 提示 -->
277 <div class="tips">{{$t('index.quote.vhis.tips')}}</div> 277 <div class="tips">{{$t('index.quote.genRich.tips')}}</div>
278 </div> 278 </div>
279 </div> 279 </div>
280 280
......