Authored by 陈峰

Merge branch 'release/3.0' into 'master'

Release/3.0



See merge request !22
@@ -280,7 +280,6 @@ const component = { @@ -280,7 +280,6 @@ const component = {
280 let responseData = { 280 let responseData = {
281 module: 'me', 281 module: 'me',
282 title: '会员特权详情', 282 title: '会员特权详情',
283 - noLocalCSS: true  
284 }; 283 };
285 284
286 let param = { 285 let param = {
@@ -16,7 +16,7 @@ @@ -16,7 +16,7 @@
16 </div> 16 </div>
17 <div class="icon-container"> 17 <div class="icon-container">
18 <span class="blk-start-icon"></span> 18 <span class="blk-start-icon"></span>
19 - <p class="icon-label">BLK</p> 19 + <p class="icon-label app-version"></p>
20 </div> 20 </div>
21 <div class="description"> 21 <div class="description">
22 <p>The world of fashion is</p> 22 <p>The world of fashion is</p>
1 <div class="vip-privilege-page yoho-page"> 1 <div class="vip-privilege-page yoho-page">
2 - <div class="blk-header-wrap">  
3 - <div class="blk-header">  
4 - <div class="blk-header-left">  
5 - <i class="icon icon-back go-back-btn"></i>  
6 - </div>  
7 - <div class="blk-header-main">  
8 - <span class="blk-header-title">VIP特权</span>  
9 - </div>  
10 - </div> 2 + <div id="header">
  3 + <div class="blk-header-wrap">
  4 + <div class="blk-header">
  5 + <div class="blk-header-left"><i class="icon icon-back go-back-btn"></i></div>
  6 + <div class="blk-header-right"></div>
  7 + <div class="blk-header-main"><span class="blk-header-title">VIP特权</span></div>
  8 + </div>
  9 + <div class="blk-header-gap"></div>
  10 + </div>
  11 + </div>
11 <ul class="privilege-list"> 12 <ul class="privilege-list">
12 - {{#each privilege}}  
13 - <li>  
14 - <span class="icon {{pic}}"></span>  
15 - <p>  
16 - {{title}}  
17 - <span>{{description}}</span>  
18 - </p>  
19 - </li>  
20 - {{/each}} 13 + {{#each privilege}}
  14 + <li>
  15 + <span class="icon {{pic}}"></span>
  16 + <p>
  17 + {{title}}
  18 + <span>{{description}}</span>
  19 + </p>
  20 + </li>
  21 + {{/each}}
21 </ul> 22 </ul>
22 </div> 23 </div>
1 import yoho from 'yoho'; 1 import yoho from 'yoho';
2 import $ from 'jquery'; 2 import $ from 'jquery';
  3 +import Vue from 'vue';
  4 +import HeaderBox from 'component/header.vue';
  5 +import 'me/_vip-grade.css';
3 6
4 -$('.go-back-btn').click(function() {  
5 - yoho.goBack({}, function() {}, function() {}); 7 +new Vue({
  8 + el: '#header',
  9 + render: h => h(HeaderBox, {
  10 + props: {
  11 + title: 'VIP特权'
  12 + }
  13 + })
6 }); 14 });
7 -  
8 setTimeout(function() { 15 setTimeout(function() {
9 if ($('.vip-privilege-page').height() < $(window).height()) { 16 if ($('.vip-privilege-page').height() < $(window).height()) {
10 $('.vip-privilege-page').height($(window).height()); 17 $('.vip-privilege-page').height($(window).height());
1 @import "help"; 1 @import "help";
2 @import "feedback"; 2 @import "feedback";
3 @import "about-us"; 3 @import "about-us";
4 -@import "vip-grade";  
1 -.ios {  
2 - .vip-grade-page,  
3 - .vip-privilege-page {  
4 - .blk-header {  
5 - padding-top: 55px;  
6 - font-family: "PingFangSC";  
7 - font-weight: 600;  
8 - }  
9 -  
10 - .basic-info {  
11 - margin-top: 25px;  
12 - }  
13 -  
14 - .blk-header-left {  
15 - position: relative;  
16 - top: 2px;  
17 - }  
18 -  
19 - .privilege-list {  
20 - margin-top: 35px;  
21 - }  
22 - }  
23 -}  
24 -  
25 -.vip-grade-page,  
26 -.vip-privilege-page {  
27 - .blk-header {  
28 - box-sizing: content-box;  
29 - position: fixed;  
30 - top: 0;  
31 - right: 0;  
32 - left: 0;  
33 - z-index: 210;  
34 - padding: 20px 34px;  
35 - height: 60px;  
36 - max-width: 750px;  
37 - margin-left: auto;  
38 - margin-right: auto;  
39 - line-height: 65px;  
40 - font-size: 44px;  
41 - background-color: #fff;  
42 - border-bottom: 1px solid #eee;  
43 - color: #000;  
44 -  
45 - .icon,  
46 - .blk-header-title {  
47 - vertical-align: middle;  
48 - }  
49 -  
50 - .blk-header-right {  
51 - margin-right: -32px;  
52 - }  
53 -  
54 - .icon {  
55 - min-width: 110px;  
56 - min-height: 100px;  
57 - line-height: 110px;  
58 - margin-top: -20px;  
59 - margin-left: -32px;  
60 - text-indent: 32px;  
61 - display: inline-block;  
62 - }  
63 -  
64 - .go-back-btn {  
65 - &:hover {  
66 - background: #ccc;  
67 - opacity: 0.5;  
68 - }  
69 - }  
70 - }  
71 -  
72 - .blk-header-left {  
73 - float: left;  
74 - font-size: 42px;  
75 - }  
76 -  
77 - .blk-header-main {  
78 - display: block;  
79 - text-align: center;  
80 - margin-left: auto;  
81 - margin-right: auto;  
82 - font-size: 42px;  
83 - overflow: hidden;  
84 - white-space: nowrap;  
85 - text-overflow: ellipsis;  
86 - position: absolute;  
87 - left: 0;  
88 - right: 0;  
89 - z-index: -1;  
90 - }  
91 -}  
92 -  
93 -.vip-grade-page {  
94 - background: #f0f0f0;  
95 - padding-bottom: 30px;  
96 -  
97 - .block {  
98 - padding: 0 30px;  
99 - margin-bottom: 30px;  
100 - border-top: 1px solid #e0e0e0;  
101 - border-bottom: 1px solid #e0e0e0;  
102 - background: #fff;  
103 - }  
104 -  
105 - .basic-info {  
106 - padding-top: 130px;  
107 - padding-bottom: 25px;  
108 -  
109 - p {  
110 - width: 100%;  
111 - height: auto;  
112 - overflow: hidden;  
113 - display: block;  
114 - }  
115 -  
116 - span {  
117 - overflow: hidden;  
118 - }  
119 -  
120 - .user-name {  
121 - float: left;  
122 - max-width: 240px;  
123 - text-overflow: ellipsis;  
124 - white-space: nowrap;  
125 - font-size: 40px;  
126 - margin-right: 0.5rem;  
127 - }  
128 -  
129 - .vip-icon {  
130 - margin-top: 6px;  
131 - float: left;  
132 - width: 110px;  
133 - height: 40px;  
134 - line-height: 40px;  
135 - }  
136 -  
137 - .vip-3 {  
138 - background: resolve("me/vip-3.png");  
139 - }  
140 1
141 - .vip-2 {  
142 - background: resolve("me/vip-2.png");  
143 - }  
144 -  
145 - .vip-1 {  
146 - background: resolve("me/vip-1.png");  
147 - }  
148 -  
149 - .vip-3,  
150 - .vip-2,  
151 - .vip-1 {  
152 - background-size: 100%;  
153 - }  
154 -  
155 - .grade-desc {  
156 - margin-top: 20px;  
157 - font-size: 26px;  
158 - color: #b0b0b0;  
159 -  
160 - .sub-desc {  
161 - margin-top: 10px;  
162 - }  
163 - }  
164 -  
165 - .sum-cost {  
166 - margin-top: 10px;  
167 - font-size: 26px;  
168 -  
169 - > span {  
170 - font-style: italic;  
171 - font-size: 34px;  
172 - color: #000;  
173 - font-weight: bold;  
174 - }  
175 - }  
176 -  
177 - .progresser {  
178 - position: relative;  
179 - width: 100%;  
180 - padding: 15px 0;  
181 - margin-bottom: 30px;  
182 - }  
183 -  
184 - .outer {  
185 - height: 20px;  
186 - background: #e6e6e6;  
187 - border-radius: 10px;  
188 - }  
189 -  
190 - .inner {  
191 - position: absolute;  
192 - top: 15px;  
193 - height: 20px;  
194 - background: #000;  
195 - border-radius: 10px;  
196 - }  
197 -  
198 - .beacon {  
199 - position: absolute;  
200 - margin-top: 15px;  
201 - font-style: italic;  
202 - margin-bottom: 30px;  
203 - }  
204 -  
205 - .beacon-max {  
206 - right: 0;  
207 - }  
208 -  
209 - .cost-limit {  
210 - position: absolute;  
211 - top: -30px;  
212 - right: 0;  
213 - color: #b0b0b0;  
214 - }  
215 -  
216 - .cost-gap {  
217 - color: #000;  
218 - margin: 0 8px;  
219 - }  
220 -  
221 - .sub-desc {  
222 - display: block;  
223 - }  
224 - }  
225 -  
226 - .cost {  
227 - padding: 0 0 0 30px;  
228 - }  
229 -  
230 - .cost li {  
231 - height: 90px;  
232 - line-height: 90px;  
233 - font-size: 34px;  
234 - padding-right: 0;  
235 -  
236 - &:first-child {  
237 - border-bottom: 1px solid #e0e0e0;  
238 - }  
239 -  
240 - > span {  
241 - float: right;  
242 - padding: 0 30px 0 0;  
243 - font-size: 28px;  
244 - }  
245 - }  
246 -  
247 - .privilege {  
248 - padding-right: 0;  
249 - padding-bottom: 40px;  
250 -  
251 - .title {  
252 - height: 90px;  
253 - line-height: 90px;  
254 - font-size: 30px;  
255 - border-bottom: 1px solid #e0e0e0;  
256 - }  
257 - }  
258 -  
259 - .all-privilege {  
260 - display: block;  
261 - height: 90px;  
262 - line-height: 90px;  
263 - font-size: 30px;  
264 - margin-bottom: 0;  
265 -  
266 - span {  
267 - float: right;  
268 - color: #e0e0e0;  
269 - line-height: 90px;  
270 - }  
271 - }  
272 -}  
273 2
274 .vip-privilege-page { 3 .vip-privilege-page {
275 - padding-top: 100px;  
276 background: #f0f0f0; 4 background: #f0f0f0;
277 } 5 }
278 6
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 <div v-if="channel.length" class="channel-tab"> 2 <div v-if="channel.length" class="channel-tab">
3 <div class="channel ellipsis" v-for="(item, index) in channel" :key="index" :class="{focus: index === currentChannel}" 3 <div class="channel ellipsis" v-for="(item, index) in channel" :key="index" :class="{focus: index === currentChannel}"
4 @click="changeChannel(index, item.id)" :style="{width: (1 / channel.length) * 100 + '%'}"> 4 @click="changeChannel(index, item.id)" :style="{width: (1 / channel.length) * 100 + '%'}">
5 - <span class="name">{{item.name && item.name.toUpperCase()}}</span> 5 + <span class="name">{{item.name | keepEn}}</span>
6 </div> 6 </div>
7 </div> 7 </div>
8 </template> 8 </template>
@@ -89,6 +89,12 @@ @@ -89,6 +89,12 @@
89 } 89 }
90 } 90 }
91 }, 91 },
  92 + filters: {
  93 + keepEn(name){
  94 + name = (name || '').toUpperCase();
  95 + return name.replace(/(男士|女士)$/g, '');
  96 + }
  97 + },
92 watch: { 98 watch: {
93 current(val) { 99 current(val) {
94 this.currentChannel = val; 100 this.currentChannel = val;
@@ -175,7 +175,7 @@ @@ -175,7 +175,7 @@
175 } 175 }
176 176
177 .right-btn { 177 .right-btn {
178 - font-size: 38px; 178 + font-size: 17PX;
179 margin-right: 30px; 179 margin-right: 30px;
180 } 180 }
181 } 181 }
1 <template> 1 <template>
2 <ul class="list-box"> 2 <ul class="list-box">
3 - <li v-for="item in items" :key="item.name"><a class="no-intercept" :href="'#' + item.index">{{item.name}}</a></li> 3 + <li v-for="item in items" :key="item.name"><a class="no-intercept" href="javascript:;" @click="() => {loc(item.index)}">{{item.name}}</a></li>
4 </ul> 4 </ul>
5 </template> 5 </template>
6 <style> 6 <style>
@@ -47,6 +47,21 @@ @@ -47,6 +47,21 @@
47 } 47 }
48 } 48 }
49 }, 49 },
  50 + methods: {
  51 + loc(index) {
  52 + let $el = document.querySelector(`a[name="${index}"]`);
  53 +
  54 + if ($el) {
  55 + let top = document.querySelector(`a[name=${index}]`).offsetTop;
  56 + let header = document.querySelector('.blk-header');
  57 +
  58 + if (header) {
  59 + top -= header.clientHeight + 2;
  60 + }
  61 + window.scrollTo(0, top);
  62 + }
  63 + }
  64 + },
50 created() { 65 created() {
51 if (!this.indexList) { 66 if (!this.indexList) {
52 67
@@ -6,7 +6,7 @@ @@ -6,7 +6,7 @@
6 <div class="my-header" v-if="data.nickName"> 6 <div class="my-header" v-if="data.nickName">
7 <a class="user-info auth" id="user-info" href='/me/mydetails'> 7 <a class="user-info auth" id="user-info" href='/me/mydetails'>
8 <img class="user-avatar" :src="headIco" @error="setEmptyimg"> 8 <img class="user-avatar" :src="headIco" @error="setEmptyimg">
9 - <span class="username" :class="{'username-top': !data.vipLevel}">{{ data.nickName }}</span> 9 + <span class="username ellipsis" :class="{'username-top': !data.vipLevel}">{{ data.nickName }}</span>
10 <div class="account-mg">账号管理<span class="icon icon-right"></span></div> 10 <div class="account-mg">账号管理<span class="icon icon-right"></span></div>
11 </a> 11 </a>
12 <a :class="`vip-level level-${data.vipLevel}`" v-if="data.vipLevel" href='/me/grade'></a> 12 <a :class="`vip-level level-${data.vipLevel}`" v-if="data.vipLevel" href='/me/grade'></a>
@@ -15,7 +15,7 @@ @@ -15,7 +15,7 @@
15 <span class="username" @click="sign">登录/注册</span> 15 <span class="username" @click="sign">登录/注册</span>
16 </div> 16 </div>
17 <div class="change-channel" @click="goChannel"> 17 <div class="change-channel" @click="goChannel">
18 - <span class="label">切换购物频道</span> 18 + <span class="label">默认购物频道</span>
19 <span class="channel">{{curChannel}}<span class="icon icon-right"></span></span> 19 <span class="channel">{{curChannel}}<span class="icon icon-right"></span></span>
20 </div> 20 </div>
21 <div class="group-list"> 21 <div class="group-list">
1 <template> 1 <template>
2 <div> 2 <div>
3 - <div class="blk-header-wrap">  
4 - <div class="blk-header">  
5 - <div class="blk-header-left">  
6 - <i class="icon icon-back go-back-btn" @click="goBack"></i>  
7 - </div>  
8 - <div class="blk-header-main">  
9 - <span class="blk-header-title">会员等级</span>  
10 - </div>  
11 - </div>  
12 - </div> 3 + <header-box title="会员等级" ref="header"></header-box>
13 <div class="basic-info block" v-if="vipGrade.vip3"> 4 <div class="basic-info block" v-if="vipGrade.vip3">
14 <p> 5 <p>
15 <span class="user-name">{{vipGrade.name}}</span> 6 <span class="user-name">{{vipGrade.name}}</span>
@@ -126,14 +117,193 @@ @@ -126,14 +117,193 @@
126 </div> 117 </div>
127 </template> 118 </template>
128 <style> 119 <style>
129 - .go-back-btn {  
130 - font-size: 64px; 120 + .vip-grade-page {
  121 + background: #f0f0f0;
  122 + padding-bottom: 30px;
  123 +
  124 + .block {
  125 + padding: 0 30px;
  126 + margin-bottom: 30px;
  127 + border-top: 1px solid #e0e0e0;
  128 + border-bottom: 1px solid #e0e0e0;
  129 + background: #fff;
  130 + }
  131 +
  132 + .basic-info {
  133 + padding-top: 30px;
  134 + padding-bottom: 25px;
  135 + border-top: none;
  136 +
  137 + p {
  138 + width: 100%;
  139 + height: auto;
  140 + overflow: hidden;
  141 + display: block;
  142 + }
  143 +
  144 + span {
  145 + overflow: hidden;
  146 + }
  147 +
  148 + .user-name {
  149 + float: left;
  150 + max-width: 240px;
  151 + text-overflow: ellipsis;
  152 + white-space: nowrap;
  153 + font-size: 40px;
  154 + margin-right: 0.5rem;
  155 + }
  156 +
  157 + .vip-icon {
  158 + margin-top: 6px;
  159 + float: left;
  160 + width: 110px;
  161 + height: 40px;
  162 + line-height: 40px;
  163 + }
  164 +
  165 + .vip-3 {
  166 + background: resolve("me/vip-3.png");
  167 + }
  168 +
  169 + .vip-2 {
  170 + background: resolve("me/vip-2.png");
  171 + }
  172 +
  173 + .vip-1 {
  174 + background: resolve("me/vip-1.png");
  175 + }
  176 +
  177 + .vip-3,
  178 + .vip-2,
  179 + .vip-1 {
  180 + background-size: 100%;
  181 + }
  182 +
  183 + .grade-desc {
  184 + margin-top: 20px;
  185 + font-size: 26px;
  186 + color: #b0b0b0;
  187 +
  188 + .sub-desc {
  189 + margin-top: 10px;
  190 + }
  191 + }
  192 +
  193 + .sum-cost {
  194 + margin-top: 10px;
  195 + font-size: 26px;
  196 +
  197 + > span {
  198 + font-style: italic;
  199 + font-size: 34px;
  200 + color: #000;
  201 + font-weight: bold;
  202 + }
  203 + }
  204 +
  205 + .progresser {
  206 + position: relative;
  207 + width: 100%;
  208 + padding: 15px 0;
  209 + margin-bottom: 30px;
  210 + }
  211 +
  212 + .outer {
  213 + height: 20px;
  214 + background: #e6e6e6;
  215 + border-radius: 10px;
  216 + }
  217 +
  218 + .inner {
  219 + position: absolute;
  220 + top: 15px;
  221 + height: 20px;
  222 + background: #000;
  223 + border-radius: 10px;
  224 + }
  225 +
  226 + .beacon {
  227 + position: absolute;
  228 + margin-top: 15px;
  229 + font-style: italic;
  230 + margin-bottom: 30px;
  231 + }
  232 +
  233 + .beacon-max {
  234 + right: 0;
  235 + }
  236 +
  237 + .cost-limit {
  238 + position: absolute;
  239 + top: -30px;
  240 + right: 0;
  241 + color: #b0b0b0;
  242 + }
  243 +
  244 + .cost-gap {
  245 + color: #000;
  246 + margin: 0 8px;
  247 + }
  248 +
  249 + .sub-desc {
  250 + display: block;
  251 + }
  252 + }
  253 +
  254 + .cost {
  255 + padding: 0 0 0 30px;
  256 + }
  257 +
  258 + .cost li {
  259 + height: 90px;
  260 + line-height: 90px;
  261 + font-size: 34px;
  262 + padding-right: 0;
  263 +
  264 + &:first-child {
  265 + border-bottom: 1px solid #e0e0e0;
  266 + }
  267 +
  268 + > span {
  269 + float: right;
  270 + padding: 0 30px 0 0;
  271 + font-size: 28px;
  272 + }
  273 + }
  274 +
  275 + .privilege {
  276 + padding-right: 0;
  277 + padding-bottom: 40px;
  278 +
  279 + .title {
  280 + height: 90px;
  281 + line-height: 90px;
  282 + font-size: 30px;
  283 + border-bottom: 1px solid #e0e0e0;
  284 + }
  285 + }
  286 +
  287 + .all-privilege {
  288 + display: block;
  289 + height: 90px;
  290 + line-height: 90px;
  291 + font-size: 30px;
  292 + margin-bottom: 0;
  293 +
  294 + span {
  295 + float: right;
  296 + color: #e0e0e0;
  297 + line-height: 90px;
  298 + }
131 } 299 }
  300 +}
132 </style> 301 </style>
133 302
134 <script> 303 <script>
135 import $ from 'jquery'; 304 import $ from 'jquery';
136 import yoho from 'yoho'; 305 import yoho from 'yoho';
  306 + import HeaderBox from 'component/header.vue';
137 307
138 export default { 308 export default {
139 data() { 309 data() {
@@ -155,11 +325,11 @@ @@ -155,11 +325,11 @@
155 $('.vip-grade-page').height($(window).height()); 325 $('.vip-grade-page').height($(window).height());
156 } 326 }
157 }, 500); 327 }, 500);
158 - },  
159 - goBack() {  
160 - yoho.goBack({}, function() {}, function() {});  
161 } 328 }
162 }, 329 },
  330 + components: {
  331 + HeaderBox
  332 + },
163 mounted() { 333 mounted() {
164 this.reload(); 334 this.reload();
165 } 335 }
@@ -5,6 +5,7 @@ @@ -5,6 +5,7 @@
5 <product-list :data="productList" :state="listState"></product-list> 5 <product-list :data="productList" :state="listState"></product-list>
6 </div> 6 </div>
7 <filter-box :val="order" :filter="filterConfig" v-if="enableOrder" ref="filter"></filter-box> 7 <filter-box :val="order" :filter="filterConfig" v-if="enableOrder" ref="filter"></filter-box>
  8 + <shopping-bag :cart-count="cartCount" v-if="isApp"></shopping-bag>
8 </div> 9 </div>
9 </template> 10 </template>
10 <style> 11 <style>
@@ -35,6 +36,8 @@ @@ -35,6 +36,8 @@
35 import shopTop from 'product/shop/shop-top.vue'; // 店铺头部信息 36 import shopTop from 'product/shop/shop-top.vue'; // 店铺头部信息
36 import ProductList from 'component/product/list.vue'; 37 import ProductList from 'component/product/list.vue';
37 import FilterBox from 'component/product/filter/index.vue'; 38 import FilterBox from 'component/product/filter/index.vue';
  39 + import ShoppingBag from 'component/product/shopping-bag.vue';
  40 +
38 41
39 const $shop = $('#shop'); 42 const $shop = $('#shop');
40 43
@@ -44,6 +47,7 @@ @@ -44,6 +47,7 @@
44 export default { 47 export default {
45 data() { 48 data() {
46 return { 49 return {
  50 + isApp: yoho.isApp,
47 noheader: false, 51 noheader: false,
48 shareData: {}, // 分享相关数据 52 shareData: {}, // 分享相关数据
49 shopInfo: {}, // 店铺介绍相关数据 53 shopInfo: {}, // 店铺介绍相关数据
@@ -64,6 +68,7 @@ @@ -64,6 +68,7 @@
64 inSearching: false, 68 inSearching: false,
65 enableOrder: false, 69 enableOrder: false,
66 order: '', 70 order: '',
  71 + cartCount: 0
67 }; 72 };
68 }, 73 },
69 computed: { 74 computed: {
@@ -178,13 +183,22 @@ @@ -178,13 +183,22 @@
178 this.page = 0; 183 this.page = 0;
179 this.productList = []; 184 this.productList = [];
180 this.search(); 185 this.search();
  186 + },
  187 +
  188 + refreshCart: function() {
  189 + $.get('/product/cart-count.json').then(result=> {
  190 + if (result.code === 200) {
  191 + this.cartCount = result.data.cart_goods_count;
  192 + }
  193 + });
181 } 194 }
182 }, 195 },
183 components: { 196 components: {
184 topBar, 197 topBar,
185 shopTop, 198 shopTop,
186 ProductList, 199 ProductList,
187 - FilterBox 200 + FilterBox,
  201 + ShoppingBag
188 }, 202 },
189 created() { 203 created() {
190 const self = this; 204 const self = this;
@@ -219,6 +233,12 @@ @@ -219,6 +233,12 @@
219 self.filter = val; 233 self.filter = val;
220 self.$refs.filter.isVisible = false; 234 self.$refs.filter.isVisible = false;
221 }); 235 });
  236 +
  237 + // 读取购物车数量
  238 + if (this.isApp) {
  239 + this.refreshCart();
  240 + bus.$on('app.shoppingcart.refresh', this.refreshCart);
  241 + }
222 } 242 }
223 }; 243 };
224 244