Commit 2f23010ecd412149468a12694491a34e1dcef85a
1 parent
d4db682c
Exists in
master
feat:导师删除,联系修改
Showing
5 changed files
with
332 additions
and
268 deletions
Show diff stats
src/views/Home.vue
@@ -15,7 +15,14 @@ | @@ -15,7 +15,14 @@ | ||
15 | </van-swipe> | 15 | </van-swipe> |
16 | </div> | 16 | </div> |
17 | <div class="content"> | 17 | <div class="content"> |
18 | - <van-search v-model="searchValue" placeholder="搜索馆关键字、活动、研学旅行" shape="round" @search="onSearch()" /> | 18 | + <van-search |
19 | + v-model="searchValue" | ||
20 | + :placeholder="placeholder" | ||
21 | + @focus="placeholder = ''" | ||
22 | + @blur="placeholder = '搜索馆关键字、活动、研学旅行'" | ||
23 | + shape="round" | ||
24 | + @search="onSearch()" | ||
25 | + /> | ||
19 | <div class="type_box"> | 26 | <div class="type_box"> |
20 | <div @click="handleCourseMore()"> | 27 | <div @click="handleCourseMore()"> |
21 | <img src="@/assets/service/homeicon1.png" alt="" /> | 28 | <img src="@/assets/service/homeicon1.png" alt="" /> |
@@ -33,10 +40,10 @@ | @@ -33,10 +40,10 @@ | ||
33 | <img src="@/assets/service/homeicon4.png" alt="" /> | 40 | <img src="@/assets/service/homeicon4.png" alt="" /> |
34 | <p>官方资讯</p> | 41 | <p>官方资讯</p> |
35 | </div> | 42 | </div> |
36 | - <div @click="handleTeacher()"> | 43 | + <!-- <div @click="handleTeacher()"> |
37 | <img src="@/assets/service/homeicon5.png" alt="" /> | 44 | <img src="@/assets/service/homeicon5.png" alt="" /> |
38 | <p>研学导师</p> | 45 | <p>研学导师</p> |
39 | - </div> | 46 | + </div> --> |
40 | </div> | 47 | </div> |
41 | <div class="infomation_box"> | 48 | <div class="infomation_box"> |
42 | <img class="news" src="@/assets/service/news.png" @click="handleNewMore()" alt="" /> | 49 | <img class="news" src="@/assets/service/news.png" @click="handleNewMore()" alt="" /> |
@@ -115,6 +122,7 @@ export default { | @@ -115,6 +122,7 @@ export default { | ||
115 | }, | 122 | }, |
116 | data() { | 123 | data() { |
117 | return { | 124 | return { |
125 | + placeholder: '搜索馆关键字、活动、研学旅行', | ||
118 | tieshi: true, | 126 | tieshi: true, |
119 | navActive: 1, | 127 | navActive: 1, |
120 | swipeImgs: '', | 128 | swipeImgs: '', |
src/views/Service/AbroadDetailNext/AbroadDetail.scss
@@ -584,6 +584,19 @@ | @@ -584,6 +584,19 @@ | ||
584 | margin-bottom: 44px; | 584 | margin-bottom: 44px; |
585 | } | 585 | } |
586 | } | 586 | } |
587 | + .contact_btn { | ||
588 | + position: fixed; | ||
589 | + bottom: 36px; | ||
590 | + left: 15px; | ||
591 | + width: 720px; | ||
592 | + height: 92px; | ||
593 | + text-align: center; | ||
594 | + line-height: 92px; | ||
595 | + background: rgb(22, 190, 142); | ||
596 | + border-radius: 46px; | ||
597 | + font-size: 36px; | ||
598 | + color: #fff; | ||
599 | + } | ||
587 | .Collection2 { | 600 | .Collection2 { |
588 | position: fixed; | 601 | position: fixed; |
589 | bottom: 0; | 602 | bottom: 0; |
src/views/Service/AbroadDetailNext/AbroadDetailNext.vue
@@ -54,7 +54,7 @@ | @@ -54,7 +54,7 @@ | ||
54 | </div> | 54 | </div> |
55 | </div> | 55 | </div> |
56 | <package v-if="courseId" :courseId="courseId" :packageArr="packageArr"></package> | 56 | <package v-if="courseId" :courseId="courseId" :packageArr="packageArr"></package> |
57 | - <p class="tip">如有特殊需求请联系【客服】</p> | 57 | + <p class="tip" @click="handleContact">如有特殊需求请联系【客服】</p> |
58 | <div class="package top_border" v-if="packageArr.length > 0 && packageArr[packageActive].comboInfoList.length > 1"> | 58 | <div class="package top_border" v-if="packageArr.length > 0 && packageArr[packageActive].comboInfoList.length > 1"> |
59 | <div class="package_box"> | 59 | <div class="package_box"> |
60 | <div style="overflow: auto"> | 60 | <div style="overflow: auto"> |
@@ -84,12 +84,8 @@ | @@ -84,12 +84,8 @@ | ||
84 | <!-- 基地信息 --> | 84 | <!-- 基地信息 --> |
85 | <abroad-base v-if="detailData" :baseId="detailData.baseId"></abroad-base> | 85 | <abroad-base v-if="detailData" :baseId="detailData.baseId"></abroad-base> |
86 | 86 | ||
87 | - <div class="Collection2"> | ||
88 | - <div class="box"> | ||
89 | - <div class="btn" @click="handleShare"></div> | ||
90 | - <div class="btn" @click="handleContact"></div> | ||
91 | - </div> | ||
92 | - </div> | 87 | + <div class="contact_btn" @click="handleContact">联系客服</div> |
88 | + | ||
93 | <!-- <div class="Collection" v-if="detailData"> | 89 | <!-- <div class="Collection" v-if="detailData"> |
94 | <ShareBox type="button" :detailData="detailData" v-if="showShareBox" @hiddenShare="showShareBox=false" @showShareDes="showShareDes=true"></ShareBox> | 90 | <ShareBox type="button" :detailData="detailData" v-if="showShareBox" @hiddenShare="showShareBox=false" @showShareDes="showShareDes=true"></ShareBox> |
95 | <div class="box box1"> | 91 | <div class="box box1"> |
@@ -626,14 +622,23 @@ export default { | @@ -626,14 +622,23 @@ export default { | ||
626 | handleContact() { | 622 | handleContact() { |
627 | let mobile = this.baseDetailData.mobile[0] | 623 | let mobile = this.baseDetailData.mobile[0] |
628 | if (mobile) { | 624 | if (mobile) { |
629 | - ZWJSBridge.phoneCall({ | ||
630 | - corpId: mobile, | 625 | + this.$dialog.confirm({ |
626 | + title: '提示', | ||
627 | + message: '是否拨打客服电话', | ||
631 | }) | 628 | }) |
632 | - .then((res) => { | ||
633 | - console.log(res) | 629 | + .then(() => { |
630 | + ZWJSBridge.phoneCall({ | ||
631 | + corpId: mobile, | ||
632 | + }) | ||
633 | + .then((res) => { | ||
634 | + console.log(res) | ||
635 | + }) | ||
636 | + .catch((err) => { | ||
637 | + console.log(err) | ||
638 | + }) | ||
634 | }) | 639 | }) |
635 | - .catch((err) => { | ||
636 | - console.log(err) | 640 | + .catch(() => { |
641 | + // on cancel | ||
637 | }) | 642 | }) |
638 | } else { | 643 | } else { |
639 | this.$toast('暂无联系方式') | 644 | this.$toast('暂无联系方式') |
@@ -644,7 +649,17 @@ export default { | @@ -644,7 +649,17 @@ export default { | ||
644 | </script> | 649 | </script> |
645 | <style lang="scss"> | 650 | <style lang="scss"> |
646 | .elder { | 651 | .elder { |
647 | - .abroad_detail .uni_text .address,.abroad_detail .uni_text .rate > span,.package .period_nodata,.abroad_detail .package .package_title,.abroad_detail .tip,.abroad_detail .cardCont .day_tag,.abroad_detail .cardCont table td,.abroad_detail .tag_item .tag_title,.abroad_detail .tag_item .tag_text,.abroad_detail .base .center .address,.abroad_detail .base .center .tag { | 652 | + .abroad_detail .uni_text .address, |
653 | + .abroad_detail .uni_text .rate > span, | ||
654 | + .package .period_nodata, | ||
655 | + .abroad_detail .package .package_title, | ||
656 | + .abroad_detail .tip, | ||
657 | + .abroad_detail .cardCont .day_tag, | ||
658 | + .abroad_detail .cardCont table td, | ||
659 | + .abroad_detail .tag_item .tag_title, | ||
660 | + .abroad_detail .tag_item .tag_text, | ||
661 | + .abroad_detail .base .center .address, | ||
662 | + .abroad_detail .base .center .tag { | ||
648 | font-size: 36px !important; | 663 | font-size: 36px !important; |
649 | } | 664 | } |
650 | } | 665 | } |
src/views/Service/BaseDetail/BaseDetail.scss
1 | .base_detail { | 1 | .base_detail { |
2 | - padding-bottom: 200px; | ||
3 | - .header { | ||
4 | - img { | ||
5 | - width: 100%; | ||
6 | - } | 2 | + padding-bottom: 200px; |
3 | + .header { | ||
4 | + img { | ||
5 | + width: 100%; | ||
6 | + } | ||
7 | + } | ||
8 | + .uni_text { | ||
9 | + width: 100%; | ||
10 | + background: #fff; | ||
11 | + padding: 24px 34px; | ||
12 | + box-sizing: border-box; | ||
13 | + .course_name { | ||
14 | + font-size: 34px; | ||
15 | + font-weight: bold; | ||
16 | + } | ||
17 | + .course_info { | ||
18 | + font-size: 24px; | ||
19 | + color: #999; | ||
20 | + margin-top: 16px; | ||
21 | + } | ||
22 | + .address { | ||
23 | + font-size: 24px; | ||
24 | + color: #999; | ||
25 | + margin-top: 16px; | ||
26 | + width: 100%; | ||
27 | + height: 88px; | ||
28 | + line-height: 88px; | ||
29 | + background: url('../../../assets/service/address_bg.png') 100%/100% no-repeat; | ||
30 | + box-sizing: border-box; | ||
31 | + margin-top: 20px; | ||
32 | + display: flex; | ||
33 | + justify-content: space-between; | ||
34 | + align-items: center; | ||
35 | + padding: 0 20px; | ||
36 | + .icon { | ||
37 | + color: #333; | ||
38 | + // color: #000; | ||
39 | + } | ||
40 | + } | ||
41 | + .rate { | ||
42 | + margin-top: 20px; | ||
43 | + display: flex; | ||
44 | + justify-content: space-between; | ||
45 | + div > span { | ||
46 | + font-size: 30px; | ||
47 | + color: #ffcc00; | ||
48 | + margin-left: 30px; | ||
49 | + } | ||
50 | + > span { | ||
51 | + font-size: 26px; | ||
52 | + } | ||
7 | } | 53 | } |
8 | - .uni_text { | ||
9 | - width: 100%; | 54 | + .tag_box { |
55 | + padding-top: 10px; | ||
56 | + .tag { | ||
57 | + display: inline-block; | ||
58 | + margin-top: 10px; | ||
59 | + margin-right: 12px; | ||
60 | + color: #4092ff; | ||
61 | + font-size: 24px; | ||
62 | + border-radius: 8px; | ||
63 | + border: 2px solid #4092ff; | ||
64 | + padding: 2px 10px; | ||
65 | + } | ||
66 | + } | ||
67 | + } | ||
68 | + .content_box { | ||
69 | + position: relative; | ||
70 | + .content_all { | ||
71 | + overflow: hidden; | ||
72 | + font-size: 31px !important; | ||
73 | + line-height: 40px !important; | ||
74 | + letter-spacing: 1.6px; | ||
75 | + color: #666; | ||
76 | + img { | ||
77 | + display: block; | ||
78 | + max-width: 100%; | ||
79 | + margin: 0 auto; | ||
80 | + } | ||
81 | + &.active_box { | ||
82 | + white-space: nowrap; | ||
83 | + overflow: auto; | ||
84 | + &::-webkit-scrollbar { | ||
85 | + width: 0; | ||
86 | + } | ||
87 | + &::-webkit-scrollbar { | ||
88 | + display: none; | ||
89 | + } | ||
90 | + } | ||
91 | + .active_item { | ||
92 | + display: inline-block; | ||
93 | + width: 287px; | ||
94 | + cursor: pointer; | ||
10 | background: #fff; | 95 | background: #fff; |
11 | - padding: 24px 34px; | ||
12 | - box-sizing: border-box; | ||
13 | - .course_name { | ||
14 | - font-size: 34px; | ||
15 | - font-weight: bold; | 96 | + transition: 0.3s ease; |
97 | + margin-right: 14px; | ||
98 | + vertical-align: top; | ||
99 | + &:last-of-type { | ||
100 | + margin-right: 0; | ||
16 | } | 101 | } |
17 | - .course_info { | ||
18 | - font-size: 24px; | ||
19 | - color: #999; | ||
20 | - margin-top: 16px; | 102 | + .bg_box { |
103 | + width: 287px; | ||
104 | + height: 216px; | ||
105 | + background-size: cover; | ||
106 | + background-position: center; | ||
21 | } | 107 | } |
22 | - .address { | ||
23 | - font-size: 24px; | ||
24 | - color: #999; | ||
25 | - margin-top: 16px; | ||
26 | - width: 100%; | ||
27 | - height: 88px; | ||
28 | - line-height: 88px; | ||
29 | - background: url('../../../assets/service/address_bg.png') 100%/100% no-repeat; | ||
30 | - box-sizing: border-box; | ||
31 | - margin-top: 20px; | ||
32 | - display: flex; | ||
33 | - justify-content: space-between; | ||
34 | - align-items: center; | ||
35 | - padding: 0 20px; | ||
36 | - .icon { | ||
37 | - color: #333; | ||
38 | - // color: #000; | ||
39 | - } | 108 | + .text_box { |
109 | + padding: 10px; | ||
110 | + white-space: break-spaces; | ||
40 | } | 111 | } |
41 | - .rate { | ||
42 | - margin-top: 20px; | ||
43 | - display: flex; | ||
44 | - justify-content: space-between; | ||
45 | - div>span { | ||
46 | - font-size: 30px; | ||
47 | - color: #ffcc00; | ||
48 | - margin-left: 30px; | ||
49 | - } | ||
50 | - >span { | ||
51 | - font-size: 26px; | ||
52 | - } | 112 | + .tag { |
113 | + display: block; | ||
114 | + margin-top: 10px; | ||
115 | + // margin-right: 12px; | ||
116 | + font-size: 20px; | ||
117 | + line-height: 42px; | ||
118 | + color: #65768c; | ||
119 | + background: #f3f7fd; | ||
120 | + border-radius: 2px; | ||
121 | + padding: 0 10px; | ||
53 | } | 122 | } |
54 | - .tag_box { | ||
55 | - padding-top: 10px; | ||
56 | - .tag { | ||
57 | - display: inline-block; | ||
58 | - margin-top: 10px; | ||
59 | - margin-right: 12px; | ||
60 | - color: #4092ff; | ||
61 | - font-size: 24px; | ||
62 | - border-radius: 8px; | ||
63 | - border: 2px solid #4092ff; | ||
64 | - padding: 2px 10px; | ||
65 | - } | 123 | + .count_box { |
124 | + display: flex; | ||
125 | + justify-content: space-between; | ||
126 | + align-items: center; | ||
127 | + .count { | ||
128 | + color: #999999; | ||
129 | + font-size: 20px; | ||
130 | + } | ||
131 | + .reserve_btn { | ||
132 | + font-size: 22px; | ||
133 | + color: #f03c3c; | ||
134 | + } | ||
66 | } | 135 | } |
67 | - } | ||
68 | - .content_box { | ||
69 | - position: relative; | ||
70 | - .content_all { | ||
71 | - overflow: hidden; | ||
72 | - font-size: 31px !important; | ||
73 | - line-height: 40px !important; | ||
74 | - letter-spacing: 1.6px; | ||
75 | - color: #666; | ||
76 | - img { | ||
77 | - display: block; | ||
78 | - max-width: 100%; | ||
79 | - margin: 0 auto; | ||
80 | - } | ||
81 | - &.active_box { | ||
82 | - white-space: nowrap; | ||
83 | - overflow: auto; | ||
84 | - &::-webkit-scrollbar { | ||
85 | - width: 0; | ||
86 | - } | ||
87 | - &::-webkit-scrollbar { | ||
88 | - display: none; | ||
89 | - } | ||
90 | - } | ||
91 | - .active_item { | ||
92 | - display: inline-block; | ||
93 | - width: 287px; | ||
94 | - cursor: pointer; | ||
95 | - background: #fff; | ||
96 | - transition: 0.3s ease; | ||
97 | - margin-right: 14px; | ||
98 | - vertical-align: top; | ||
99 | - &:last-of-type { | ||
100 | - margin-right: 0; | ||
101 | - } | ||
102 | - .bg_box { | ||
103 | - width: 287px; | ||
104 | - height: 216px; | ||
105 | - background-size: cover; | ||
106 | - background-position: center; | ||
107 | - } | ||
108 | - .text_box { | ||
109 | - padding: 10px; | ||
110 | - white-space: break-spaces; | ||
111 | - } | ||
112 | - .tag { | ||
113 | - display: block; | ||
114 | - margin-top: 10px; | ||
115 | - // margin-right: 12px; | ||
116 | - font-size: 20px; | ||
117 | - line-height: 42px; | ||
118 | - color: #65768c; | ||
119 | - background: #f3f7fd; | ||
120 | - border-radius: 2px; | ||
121 | - padding: 0 10px; | ||
122 | - } | ||
123 | - .count_box { | ||
124 | - display: flex; | ||
125 | - justify-content: space-between; | ||
126 | - align-items: center; | ||
127 | - .count { | ||
128 | - color: #999999; | ||
129 | - font-size: 20px; | ||
130 | - } | ||
131 | - .reserve_btn { | ||
132 | - font-size: 22px; | ||
133 | - color: #f03c3c; | ||
134 | - } | ||
135 | - } | ||
136 | - .title { | ||
137 | - font-size: 28px; | ||
138 | - font-weight: bold; | ||
139 | - line-height: 40px; | ||
140 | - margin: 0; | ||
141 | - color: #000; | ||
142 | - white-space: initial; | ||
143 | - overflow: hidden; | ||
144 | - } | ||
145 | - } | ||
146 | - .teacher_box { | ||
147 | - .teacher_item { | ||
148 | - padding: 14px; | ||
149 | - width: 702px; | ||
150 | - height: 240px; | ||
151 | - background: #F9F9F9; | ||
152 | - border-radius: 20px; | ||
153 | - box-sizing: border-box; | ||
154 | - margin-bottom: 16px; | ||
155 | - } | ||
156 | - .teacher_img_box { | ||
157 | - width: 168px; | ||
158 | - height: 212px; | ||
159 | - border-radius: 12px; | ||
160 | - position: relative; | ||
161 | - overflow: hidden; | ||
162 | - float: left; | ||
163 | - margin-right: 18px; | ||
164 | - } | ||
165 | - .teacher_img { | ||
166 | - height: 100%; | ||
167 | - position: absolute; | ||
168 | - top: 0; | ||
169 | - left: 50%; | ||
170 | - transform: translate(-50%); | ||
171 | - max-width: initial; | ||
172 | - } | ||
173 | - .teacher_name { | ||
174 | - font-size: 30px; | ||
175 | - line-height: 42px; | ||
176 | - } | ||
177 | - .teacher_info { | ||
178 | - font-size: 26px; | ||
179 | - line-height: 36px; | ||
180 | - color: #999; | ||
181 | - margin-top: 4px; | ||
182 | - } | ||
183 | - .teacher_level { | ||
184 | - font-size: 24px; | ||
185 | - line-height: 34px; | ||
186 | - margin-top: 10px; | ||
187 | - } | ||
188 | - .teacher_location { | ||
189 | - font-size: 24px; | ||
190 | - line-height: 34px; | ||
191 | - margin-top: 10px; | ||
192 | - } | ||
193 | - } | 136 | + .title { |
137 | + font-size: 28px; | ||
138 | + font-weight: bold; | ||
139 | + line-height: 40px; | ||
140 | + margin: 0; | ||
141 | + color: #000; | ||
142 | + white-space: initial; | ||
143 | + overflow: hidden; | ||
194 | } | 144 | } |
195 | - } | ||
196 | - .tag_item { | ||
197 | - padding: 22px; | ||
198 | - .tag_title { | ||
199 | - font-size: 34px; | ||
200 | - font-weight: bold; | ||
201 | - margin-bottom: 32px; | 145 | + } |
146 | + .teacher_box { | ||
147 | + .teacher_item { | ||
148 | + padding: 14px; | ||
149 | + width: 702px; | ||
150 | + height: 240px; | ||
151 | + background: #f9f9f9; | ||
152 | + border-radius: 20px; | ||
153 | + box-sizing: border-box; | ||
154 | + margin-bottom: 16px; | ||
202 | } | 155 | } |
203 | - .tag_text { | ||
204 | - // font-size: 24px; | ||
205 | - // line-height: 40px; | ||
206 | - font-size: 28px !important; | ||
207 | - line-height: 44px !important; | ||
208 | - padding: 16px 0; | 156 | + .teacher_img_box { |
157 | + width: 168px; | ||
158 | + height: 212px; | ||
159 | + border-radius: 12px; | ||
160 | + position: relative; | ||
161 | + overflow: hidden; | ||
162 | + float: left; | ||
163 | + margin-right: 18px; | ||
209 | } | 164 | } |
210 | - } | ||
211 | - .top_border { | ||
212 | - border-top: 16px solid #f6f7fa; | ||
213 | - ::v-deep.van-tab { | ||
214 | - .van-tab__text { | ||
215 | - font-size: 34px !important; | ||
216 | - } | 165 | + .teacher_img { |
166 | + height: 100%; | ||
167 | + position: absolute; | ||
168 | + top: 0; | ||
169 | + left: 50%; | ||
170 | + transform: translate(-50%); | ||
171 | + max-width: initial; | ||
217 | } | 172 | } |
218 | - } | ||
219 | - .Collection { | ||
220 | - position: fixed; | ||
221 | - bottom: 0; | ||
222 | - left: 0; | ||
223 | - width: 100%; | ||
224 | - padding: 28px 22px; | ||
225 | - box-sizing: border-box; | ||
226 | - padding-bottom: 50px; | ||
227 | - z-index: 500; | ||
228 | - box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.34); | ||
229 | - .box { | ||
230 | - background: url(../../../assets/btn.png) 100%/100% no-repeat; | ||
231 | - width: 702px; | ||
232 | - height: 92px; | ||
233 | - .btn { | ||
234 | - display: inline-block; | ||
235 | - width: 50%; | ||
236 | - height: 100%; | ||
237 | - } | 173 | + .teacher_name { |
174 | + font-size: 30px; | ||
175 | + line-height: 42px; | ||
176 | + } | ||
177 | + .teacher_info { | ||
178 | + font-size: 26px; | ||
179 | + line-height: 36px; | ||
180 | + color: #999; | ||
181 | + margin-top: 4px; | ||
182 | + } | ||
183 | + .teacher_level { | ||
184 | + font-size: 24px; | ||
185 | + line-height: 34px; | ||
186 | + margin-top: 10px; | ||
187 | + } | ||
188 | + .teacher_location { | ||
189 | + font-size: 24px; | ||
190 | + line-height: 34px; | ||
191 | + margin-top: 10px; | ||
238 | } | 192 | } |
193 | + } | ||
239 | } | 194 | } |
240 | - .share_mask { | ||
241 | - width: 100%; | ||
242 | - height: 100%; | ||
243 | - position: fixed; | ||
244 | - top: 0; | ||
245 | - left: 0; | ||
246 | - background: rgba(0, 0, 0, 0.4); | ||
247 | - z-index: 999; | 195 | + } |
196 | + .tag_item { | ||
197 | + padding: 22px; | ||
198 | + .tag_title { | ||
199 | + font-size: 34px; | ||
200 | + font-weight: bold; | ||
201 | + margin-bottom: 32px; | ||
202 | + } | ||
203 | + .tag_text { | ||
204 | + // font-size: 24px; | ||
205 | + // line-height: 40px; | ||
206 | + font-size: 28px !important; | ||
207 | + line-height: 44px !important; | ||
208 | + padding: 16px 0; | ||
248 | } | 209 | } |
249 | - .share_des { | ||
250 | - position: absolute; | ||
251 | - top: 50px; | ||
252 | - right: 100px; | ||
253 | - width: 516px; | 210 | + } |
211 | + .top_border { | ||
212 | + border-top: 16px solid #f6f7fa; | ||
213 | + ::v-deep.van-tab { | ||
214 | + .van-tab__text { | ||
215 | + font-size: 34px !important; | ||
216 | + } | ||
217 | + } | ||
218 | + } | ||
219 | + .contact_btn { | ||
220 | + position: fixed; | ||
221 | + bottom: 36px; | ||
222 | + left: 15px; | ||
223 | + width: 720px; | ||
224 | + height: 92px; | ||
225 | + text-align: center; | ||
226 | + line-height: 92px; | ||
227 | + background: rgb(22, 190, 142); | ||
228 | + border-radius: 46px; | ||
229 | + font-size: 36px; | ||
230 | + color: #fff; | ||
231 | + } | ||
232 | + .Collection { | ||
233 | + position: fixed; | ||
234 | + bottom: 0; | ||
235 | + left: 0; | ||
236 | + width: 100%; | ||
237 | + padding: 28px 22px; | ||
238 | + box-sizing: border-box; | ||
239 | + padding-bottom: 50px; | ||
240 | + z-index: 500; | ||
241 | + box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.34); | ||
242 | + .box { | ||
243 | + background: url(../../../assets/btn.png) 100%/100% no-repeat; | ||
244 | + width: 702px; | ||
245 | + height: 92px; | ||
246 | + .btn { | ||
247 | + display: inline-block; | ||
248 | + width: 50%; | ||
249 | + height: 100%; | ||
250 | + } | ||
254 | } | 251 | } |
255 | -} | ||
256 | \ No newline at end of file | 252 | \ No newline at end of file |
253 | + } | ||
254 | + .share_mask { | ||
255 | + width: 100%; | ||
256 | + height: 100%; | ||
257 | + position: fixed; | ||
258 | + top: 0; | ||
259 | + left: 0; | ||
260 | + background: rgba(0, 0, 0, 0.4); | ||
261 | + z-index: 999; | ||
262 | + } | ||
263 | + .share_des { | ||
264 | + position: absolute; | ||
265 | + top: 50px; | ||
266 | + right: 100px; | ||
267 | + width: 516px; | ||
268 | + } | ||
269 | +} |
src/views/Service/BaseDetail/BaseDetail.vue
@@ -36,12 +36,13 @@ | @@ -36,12 +36,13 @@ | ||
36 | </div> | 36 | </div> |
37 | <!-- 商品详情 --> | 37 | <!-- 商品详情 --> |
38 | <base-des v-if="detailData" :detailData="detailData"></base-des> | 38 | <base-des v-if="detailData" :detailData="detailData"></base-des> |
39 | - <div class="Collection"> | 39 | + <div class="contact_btn" @click="handleContact">联系客服</div> |
40 | + <!-- <div class="Collection"> | ||
40 | <div class="box"> | 41 | <div class="box"> |
41 | <div class="btn" @click="handleShare"></div> | 42 | <div class="btn" @click="handleShare"></div> |
42 | <div class="btn" @click="handleContact"></div> | 43 | <div class="btn" @click="handleContact"></div> |
43 | </div> | 44 | </div> |
44 | - </div> | 45 | + </div> --> |
45 | <div class="share_mask" v-if="showShareDes" @click="showShareDes = false"> | 46 | <div class="share_mask" v-if="showShareDes" @click="showShareDes = false"> |
46 | <img class="share_des" src="@/assets/home/share.png" alt="" /> | 47 | <img class="share_des" src="@/assets/home/share.png" alt="" /> |
47 | </div> | 48 | </div> |
@@ -163,16 +164,25 @@ export default { | @@ -163,16 +164,25 @@ export default { | ||
163 | // 点击联系方式 | 164 | // 点击联系方式 |
164 | handleContact() { | 165 | handleContact() { |
165 | let mobile = this.detailData.mobile[0] | 166 | let mobile = this.detailData.mobile[0] |
167 | + | ||
166 | if (mobile) { | 168 | if (mobile) { |
167 | - // window.location.href = `tel:${mobile}` | ||
168 | - ZWJSBridge.phoneCall({ | ||
169 | - corpId: mobile, | 169 | + this.$dialog.confirm({ |
170 | + title: '提示', | ||
171 | + message: '是否拨打客服电话', | ||
170 | }) | 172 | }) |
171 | - .then((res) => { | ||
172 | - console.log(res) | 173 | + .then(() => { |
174 | + ZWJSBridge.phoneCall({ | ||
175 | + corpId: mobile, | ||
176 | + }) | ||
177 | + .then((res) => { | ||
178 | + console.log(res) | ||
179 | + }) | ||
180 | + .catch((err) => { | ||
181 | + console.log(err) | ||
182 | + }) | ||
173 | }) | 183 | }) |
174 | - .catch((err) => { | ||
175 | - console.log(err) | 184 | + .catch(() => { |
185 | + // on cancel | ||
176 | }) | 186 | }) |
177 | } else { | 187 | } else { |
178 | this.$toast('暂无联系方式') | 188 | this.$toast('暂无联系方式') |
@@ -187,9 +197,14 @@ export default { | @@ -187,9 +197,14 @@ export default { | ||
187 | <style lang="scss"> | 197 | <style lang="scss"> |
188 | // 长辈版 | 198 | // 长辈版 |
189 | .elder { | 199 | .elder { |
190 | - .base_detail .tag_item .tag_text,.base_detail .uni_text .tag_box .tag,.base_detail .uni_text .address,.base_detail .content_box .content_all .teacher_box .teacher_name,.base_detail .content_box .content_all .teacher_box .teacher_level,.base_detail .content_box .content_all .teacher_box .teacher_info,.base_detail .content_box .content_all .teacher_box .teacher_location{ | 200 | + .base_detail .tag_item .tag_text, |
201 | + .base_detail .uni_text .tag_box .tag, | ||
202 | + .base_detail .uni_text .address, | ||
203 | + .base_detail .content_box .content_all .teacher_box .teacher_name, | ||
204 | + .base_detail .content_box .content_all .teacher_box .teacher_level, | ||
205 | + .base_detail .content_box .content_all .teacher_box .teacher_info, | ||
206 | + .base_detail .content_box .content_all .teacher_box .teacher_location { | ||
191 | font-size: 36px; | 207 | font-size: 36px; |
192 | } | 208 | } |
193 | - | ||
194 | } | 209 | } |
195 | -</style> | ||
196 | \ No newline at end of file | 210 | \ No newline at end of file |
211 | +</style> |