fe / yohoblk-wap · Commits

Go to a project

Authored by 沈志敏
Commit be5efa5bddde85373f80e0d0a4de10d2ecb43a82 2 parents 376e61b9 e7b629e7

Merge branch 'develop' of git.yoho.cn:fe/yohoblk-wap into develop

Inline Side-by-side
Showing 23 changed files with 142 additions and 83 deletions
@@ -55,7 +55,7 @@ const getBrandListData = params => { @@ -55,7 +55,7 @@ const getBrandListData = params => {
55 let finalResult = {}; 55 let finalResult = {};
56 56
57 return brandApi.getBrandListOriginData(params).then(result => { 57 return brandApi.getBrandListOriginData(params).then(result => {
58 - if (result.data) { 58 + if (result && result.data) {
59 Object.assign(finalResult, handleBrandList(result.data.all_list)); 59 Object.assign(finalResult, handleBrandList(result.data.all_list));
60 } 60 }
61 61
@@ -12,7 +12,7 @@ const helpers = global.yoho.helpers; @@ -12,7 +12,7 @@ const helpers = global.yoho.helpers;
12 */ 12 */
13 const component = { 13 const component = {
14 index: (req, res, next) => { 14 index: (req, res, next) => {
15 - const uid = req.user.uid; 15 + const uid = req.user.uid || '6228593';
16 16
17 if (!uid && req.xhr) { 17 if (!uid && req.xhr) {
18 return res.json({ 18 return res.json({
1 'use strict'; 1 'use strict';
2 const api = global.yoho.API; 2 const api = global.yoho.API;
3 const serviceAPI = global.yoho.ServiceAPI; 3 const serviceAPI = global.yoho.ServiceAPI;
  4 +const favApi = global.yoho.FavAPI;
4 const Promise = require('bluebird'); 5 const Promise = require('bluebird');
5 const helpers = global.yoho.helpers; 6 const helpers = global.yoho.helpers;
6 7
@@ -46,6 +47,11 @@ const _getInfoNumData = (uid) => { @@ -46,6 +47,11 @@ const _getInfoNumData = (uid) => {
46 method: 'app.address.gethidden' // 用户地址的数据 47 method: 'app.address.gethidden' // 用户地址的数据
47 }, { 48 }, {
48 code: 200 49 code: 200
  50 + }), favApi.get('brower', {
  51 + method: 'app.favorite.getFavoriteCount', // 获取用户收藏商品总数
  52 + uid: uid
  53 + }, {
  54 + code: 200
49 })]).then(data => { 55 })]).then(data => {
50 const res = { 56 const res = {
51 wait_pay_num: '', 57 wait_pay_num: '',
@@ -66,6 +72,13 @@ const _getInfoNumData = (uid) => { @@ -66,6 +72,13 @@ const _getInfoNumData = (uid) => {
66 } 72 }
67 } 73 }
68 74
  75 + // 收藏商品数另外调接口
  76 + if (data[2] && data[2].data && data[2].data.product_favorite_total > 0) {
  77 + res.product_favorite_total = data[2].data.product_favorite_total > 99 ? '99+' :
  78 + data[2].data.product_favorite_total;
  79 + }
  80 +
  81 +
69 return Object.assign(res, { 82 return Object.assign(res, {
70 address_num: data[1].data && data[1].data.length ? data[1].data.length : '' 83 address_num: data[1].data && data[1].data.length ? data[1].data.length : ''
71 }); 84 });
@@ -22,7 +22,8 @@ module.exports = { @@ -22,7 +22,8 @@ module.exports = {
22 // service: 'http://service-test1.yohops.com:9999/' 22 // service: 'http://service-test1.yohops.com:9999/'
23 23
24 api: 'http://dev-api.yohops.com:9999/', 24 api: 'http://dev-api.yohops.com:9999/',
25 - service: 'http://dev-service.yohops.com:9999/' 25 + service: 'http://dev-service.yohops.com:9999/',
  26 + favApi: 'http://192.168.102.31:8092/'
26 }, 27 },
27 subDomains: { 28 subDomains: {
28 host: '.m.yohoblk.com', 29 host: '.m.yohoblk.com',
@@ -74,7 +75,8 @@ if (isProduction) { @@ -74,7 +75,8 @@ if (isProduction) {
74 appName: 'm.yohoblk.com', 75 appName: 'm.yohoblk.com',
75 domains: { 76 domains: {
76 api: 'http://api.yoho.yohoops.org/', 77 api: 'http://api.yoho.yohoops.org/',
77 - service: 'http://service.yoho.yohoops.org/' 78 + service: 'http://service.yoho.yohoops.org/',
  79 + favApi: 'http://192.168.102.31:8092/'
78 }, 80 },
79 memcache: { 81 memcache: {
80 master: ['memcache1.yohoops.org:12111', 'memcache2.yohoops.org:12111', 'memcache3.yohoops.org:12111'], 82 master: ['memcache1.yohoops.org:12111', 'memcache2.yohoops.org:12111', 'memcache3.yohoops.org:12111'],
@@ -94,7 +96,8 @@ if (isProduction) { @@ -94,7 +96,8 @@ if (isProduction) {
94 // service: 'http://dev-service.yohops.com:9999/' 96 // service: 'http://dev-service.yohops.com:9999/'
95 97
96 api: 'http://api-test1.yohops.com:9999/', 98 api: 'http://api-test1.yohops.com:9999/',
97 - service: 'http://service-test1.yohops.com:9999/' 99 + service: 'http://service-test1.yohops.com:9999/',
  100 + favApi: 'http://192.168.102.31:8092/'
98 }, 101 },
99 memcache: { 102 memcache: {
100 master: ['127.0.0.1:12111'], 103 master: ['127.0.0.1:12111'],
@@ -39,7 +39,7 @@ @@ -39,7 +39,7 @@
39 "winston": "^2.2.0", 39 "winston": "^2.2.0",
40 "winston-daily-rotate-file": "^1.1.4", 40 "winston-daily-rotate-file": "^1.1.4",
41 "yoho-md5": "^2.0.0", 41 "yoho-md5": "^2.0.0",
42 - "yoho-node-lib": "0.0.34" 42 + "yoho-node-lib": "0.0.37"
43 }, 43 },
44 "devDependencies": { 44 "devDependencies": {
45 "autoprefixer": "^6.4.0", 45 "autoprefixer": "^6.4.0",
@@ -70,6 +70,7 @@ @@ -70,6 +70,7 @@
70 "postcss-crip": "^2.0.0", 70 "postcss-crip": "^2.0.0",
71 "postcss-position": "^0.5.0", 71 "postcss-position": "^0.5.0",
72 "postcss-pxtorem": "^3.3.1", 72 "postcss-pxtorem": "^3.3.1",
  73 + "postcss-scss": "^0.1.9",
73 "postcss-short": "^1.4.0", 74 "postcss-short": "^1.4.0",
74 "postcss-sprites": "^3.3.0", 75 "postcss-sprites": "^3.3.0",
75 "postcss-use": "^2.2.0", 76 "postcss-use": "^2.2.0",
@@ -39,9 +39,6 @@ const dist = { @@ -39,9 +39,6 @@ const dist = {
39 font: `${distRoot}/assets/font` 39 font: `${distRoot}/assets/font`
40 }; 40 };
41 41
42 -// webpack 内嵌的样式中的雪碧图，写文件的时候会有冲突，这边使用单实例  
43 -let postcssSprites;  
44 -  
45 /** 42 /**
46 * postcss plugins for both dev and pro 43 * postcss plugins for both dev and pro
47 * @parem et Symbol 44 * @parem et Symbol
@@ -96,12 +93,9 @@ const postcssPlugin = (et) => { @@ -96,12 +93,9 @@ const postcssPlugin = (et) => {
96 }); 93 });
97 } 94 }
98 95
99 - if (!postcssSprites) {  
100 - postcssSprites = require('postcss-sprites').default(sprites);  
101 - }  
102 plugins = [ 96 plugins = [
103 require('precss'), 97 require('precss'),
104 - postcssSprites, 98 + require('postcss-sprites').default(sprites),
105 require('postcss-assets')(assets), 99 require('postcss-assets')(assets),
106 require('postcss-calc'), 100 require('postcss-calc'),
107 require('postcss-pxtorem')({ 101 require('postcss-pxtorem')({
@@ -149,7 +143,9 @@ gulp.task('dist', ['ge'], () => { @@ -149,7 +143,9 @@ gulp.task('dist', ['ge'], () => {
149 gulp.task('postcss-dev', () => { 143 gulp.task('postcss-dev', () => {
150 return gulp.src('scss/index.css') 144 return gulp.src('scss/index.css')
151 .pipe(sourcemaps.init()) 145 .pipe(sourcemaps.init())
152 - .pipe(postcss(postcssPlugin(env.dev))) 146 + .pipe(postcss(postcssPlugin(env.dev), {
  147 + parser: require('postcss-scss')
  148 + }))
153 .pipe(sourcemaps.write('.')) 149 .pipe(sourcemaps.write('.'))
154 .pipe(gulp.dest('css/')); 150 .pipe(gulp.dest('css/'));
155 }); 151 });
@@ -177,7 +173,9 @@ gulp.task('font', () => { @@ -177,7 +173,9 @@ gulp.task('font', () => {
177 // postcss compile in pro 173 // postcss compile in pro
178 gulp.task('postcss', ['assets'], () => { 174 gulp.task('postcss', ['assets'], () => {
179 return gulp.src('scss/index.css') 175 return gulp.src('scss/index.css')
180 - .pipe(postcss(postcssPlugin(env.pro))) 176 + .pipe(postcss(postcssPlugin(env.pro), {
  177 + parser: require('postcss-scss')
  178 + }))
181 .pipe(cssnano({ 179 .pipe(cssnano({
182 safe: true 180 safe: true
183 })) 181 }))
@@ -189,7 +187,12 @@ gulp.task('webpack-dev-server', () => { @@ -189,7 +187,12 @@ gulp.task('webpack-dev-server', () => {
189 const devConfig = Object.assign({}, webpackConfig, { 187 const devConfig = Object.assign({}, webpackConfig, {
190 devtool: '#inline-source-map', 188 devtool: '#inline-source-map',
191 vue: { 189 vue: {
192 - postcss: postcssPlugin(env.dev), 190 + postcss: {
  191 + plugins: postcssPlugin(env.dev),
  192 + options: {
  193 + parser: require('postcss-scss')
  194 + }
  195 + },
193 autoprefixer: false, 196 autoprefixer: false,
194 loaders: { 197 loaders: {
195 css: ExtractTextPlugin.extract(['css?-url']) 198 css: ExtractTextPlugin.extract(['css?-url'])
@@ -219,7 +222,12 @@ gulp.task('webpack-dev-server', () => { @@ -219,7 +222,12 @@ gulp.task('webpack-dev-server', () => {
219 gulp.task('webpack', ['assets'], (done) => { 222 gulp.task('webpack', ['assets'], (done) => {
220 const proConfig = Object.assign({}, webpackConfig, { 223 const proConfig = Object.assign({}, webpackConfig, {
221 vue: { 224 vue: {
222 - postcss: postcssPlugin(env.pro), 225 + postcss: {
  226 + plugins: postcssPlugin(env.dev),
  227 + options: {
  228 + parser: require('postcss-scss')
  229 + }
  230 + },
223 autoprefixer: false, 231 autoprefixer: false,
224 loaders: { 232 loaders: {
225 css: ExtractTextPlugin.extract(['css?-url']) 233 css: ExtractTextPlugin.extract(['css?-url'])
@@ -7,9 +7,9 @@ @@ -7,9 +7,9 @@
7 *, 7 *,
8 *:before, 8 *:before,
9 *:after { 9 *:after {
  10 + box-sizing: border-box;
10 margin: 0; 11 margin: 0;
11 padding: 0; 12 padding: 0;
12 - box-sizing: border-box;  
13 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 13 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
14 } 14 }
15 15
@@ -44,8 +44,8 @@ ul { @@ -44,8 +44,8 @@ ul {
44 position: relative; 44 position: relative;
45 margin-right: auto; 45 margin-right: auto;
46 margin-left: auto; 46 margin-left: auto;
47 - width: 100%;  
48 max-width: 750px; 47 max-width: 750px;
  48 + width: 100%;
49 } 49 }
50 50
51 .text-center { 51 .text-center {
@@ -79,21 +79,37 @@ ul { @@ -79,21 +79,37 @@ ul {
79 79
80 .ellipsis { 80 .ellipsis {
81 overflow: hidden; 81 overflow: hidden;
82 - white-space: nowrap;  
83 text-overflow: ellipsis; 82 text-overflow: ellipsis;
  83 + white-space: nowrap;
  84 +}
  85 +
  86 +img[lazy] {
  87 + transition: all 200ms;
  88 +}
  89 +
  90 +img[lazy=loading] {
  91 + opacity: 0.2;
  92 +}
  93 +
  94 +img[lazy=error] {
  95 + opacity: 0;
  96 +}
  97 +
  98 +img[lazy=loaded] {
  99 + opacity: 1;
84 } 100 }
85 101
86 @define-mixin line-clamp { 102 @define-mixin line-clamp {
87 display: -webkit-box; 103 display: -webkit-box;
88 - -webkit-box-orient: vertical;  
89 overflow: hidden; 104 overflow: hidden;
90 word-break: break-all; 105 word-break: break-all;
  106 + -webkit-box-orient: vertical;
91 } 107 }
92 108
93 @for $i from 1 to 3 { 109 @for $i from 1 to 3 {
94 .line-clamp-$i { /* stylelint-disable-line */ 110 .line-clamp-$i { /* stylelint-disable-line */
95 - -webkit-line-clamp: $(i);  
96 -  
97 @mixin line-clamp ; 111 @mixin line-clamp ;
  112 +
  113 + -webkit-line-clamp: $(i);
98 } 114 }
99 } 115 }
1 @charset "utf-8"; 1 @charset "utf-8";
  2 +
2 @import "common/index"; 3 @import "common/index";
3 @import "example/index"; 4 @import "example/index";
4 @import "me/index"; 5 @import "me/index";
@@ -19,10 +19,15 @@ @@ -19,10 +19,15 @@
19 <style> 19 <style>
20 .brand-list-box { 20 .brand-list-box {
21 width: 100%; 21 width: 100%;
  22 + padding: 0 30px;
22 23
23 .per-brand-box { 24 .per-brand-box {
24 .index { 25 .index {
25 - padding: 20px; 26 + padding: 18px 0;
  27 +
  28 + a {
  29 + font-size: 36px;
  30 + }
26 } 31 }
27 } 32 }
28 33
@@ -19,10 +19,11 @@ @@ -19,10 +19,11 @@
19 background-color: #fff; 19 background-color: #fff;
20 text-align: center; 20 text-align: center;
21 color: #b0b0b0; 21 color: #b0b0b0;
22 - height: 55px; 22 + height: 56px;
23 width: 92%; 23 width: 92%;
24 font-size: 28px; 24 font-size: 28px;
25 padding: 5px 0; 25 padding: 5px 0;
  26 + border-radius: 8px;
26 } 27 }
27 28
28 } 29 }
1 <template> 1 <template>
2 <div v-if="channel.length" class="channel-tab"> 2 <div v-if="channel.length" class="channel-tab">
3 - <div class="channel" v-for="(index, item) in channel" v-bind:class="{focus: index === current}" v-on:click="changeChannel(index)" v-bind:style="{width: (1 / channel.length) * 100 + '%'}"> 3 + <div class="channel ellipsis" v-for="(index, item) in channel" v-bind:class="{focus: index === current}" v-on:click="changeChannel(index)" v-bind:style="{width: (1 / channel.length) * 100 + '%'}">
4 <span class="name">{{item.name | uppercase}}</span> 4 <span class="name">{{item.name | uppercase}}</span>
5 </div> 5 </div>
6 </div> 6 </div>
@@ -76,7 +76,7 @@ @@ -76,7 +76,7 @@
76 width: 100%; 76 width: 100%;
77 max-width: 750px; 77 max-width: 750px;
78 height: 90px; 78 height: 90px;
79 - font-size: 24px; 79 + font-size: 26px;
80 text-align: center; 80 text-align: center;
81 background: #fff; 81 background: #fff;
82 transform: translate(-50%, 0); 82 transform: translate(-50%, 0);
@@ -84,7 +84,7 @@ @@ -84,7 +84,7 @@
84 .channel { 84 .channel {
85 display: inline-block; 85 display: inline-block;
86 line-height: 90px; 86 line-height: 90px;
87 - color: #999; 87 + color: #b0b0b0;
88 88
89 &.focus { 89 &.focus {
90 color: #000; 90 color: #000;
@@ -92,7 +92,7 @@ @@ -92,7 +92,7 @@
92 } 92 }
93 93
94 .name { 94 .name {
95 - padding: 9px 0; 95 + padding: 12px 0;
96 96
97 &.focus { 97 &.focus {
98 border-bottom: 4px solid #000; 98 border-bottom: 4px solid #000;
@@ -36,7 +36,7 @@ @@ -36,7 +36,7 @@
36 right: 0; 36 right: 0;
37 left: 0; 37 left: 0;
38 z-index: 210; 38 z-index: 210;
39 - padding: 20px 30px; 39 + padding: 20px 34px;
40 height: 70px; 40 height: 70px;
41 max-width: 750px; 41 max-width: 750px;
42 margin-left: auto; 42 margin-left: auto;
@@ -44,6 +44,7 @@ @@ -44,6 +44,7 @@
44 line-height: 70px; 44 line-height: 70px;
45 font-size: 48px; 45 font-size: 48px;
46 background-color: #fff; 46 background-color: #fff;
  47 + border-bottom: 1px solid #eee;
47 color: #000; 48 color: #000;
48 49
49 .icon, 50 .icon,
@@ -57,6 +58,7 @@ @@ -57,6 +58,7 @@
57 text-align: center; 58 text-align: center;
58 margin-left: auto; 59 margin-left: auto;
59 margin-right: auto; 60 margin-right: auto;
  61 + font-size: 42px;
60 overflow: hidden; 62 overflow: hidden;
61 white-space: nowrap; 63 white-space: nowrap;
62 text-overflow: ellipsis; 64 text-overflow: ellipsis;
@@ -68,14 +70,10 @@ @@ -68,14 +70,10 @@
68 70
69 .blk-header-right { 71 .blk-header-right {
70 float: right; 72 float: right;
71 -  
72 - .icon {  
73 - margin-left: 30px;  
74 - }  
75 } 73 }
76 74
77 .blk-header-gap { 75 .blk-header-gap {
78 - height: 100px; 76 + height: calc(70 + 20 * 2 + 1)px;
79 background-color: transparent; 77 background-color: transparent;
80 } 78 }
81 79
@@ -85,7 +83,7 @@ @@ -85,7 +83,7 @@
85 } 83 }
86 84
87 .blk-header-gap { 85 .blk-header-gap {
88 - height: calc(70 + 60 + 10)px; 86 + height: calc(70 + 20 * 2 + 40 + 1)px;
89 } 87 }
90 } 88 }
91 </style> 89 </style>
@@ -11,8 +11,10 @@ @@ -11,8 +11,10 @@
11 <h2 class="card-label"> 11 <h2 class="card-label">
12 <a href="{{item | goodsUrl}}" class="line-clamp-2">{{item.productName}}</a> 12 <a href="{{item | goodsUrl}}" class="line-clamp-2">{{item.productName}}</a>
13 </h2> 13 </h2>
14 - <span class="good-price" :class="{'old-price': item.marketPrice}" v-if="item.marketPrice">¥ {{item.marketPrice | toFixed}}</span>  
15 - <span class="good-price" :class="{'sale-price': item.marketPrice}">¥ {{item.salesPrice | toFixed}}</span> 14 + <div class="good-price-box clearfix">
  15 + <span class="good-price" :class="{'old-price': item.marketPrice}" v-if="item.marketPrice">¥ {{item.marketPrice | toFixed}}</span>
  16 + <span class="good-price" :class="{'sale-price': item.marketPrice}">¥ {{item.salesPrice | toFixed}}</span>
  17 + </div>
16 </div> 18 </div>
17 </li> 19 </li>
18 </ul> 20 </ul>
@@ -73,13 +75,16 @@ @@ -73,13 +75,16 @@
73 float: left; 75 float: left;
74 width: 372px; 76 width: 372px;
75 margin-right: 6px; 77 margin-right: 6px;
  78 +
76 &:nth-child(2n) { 79 &:nth-child(2n) {
77 margin-right: 0; 80 margin-right: 0;
78 } 81 }
79 } 82 }
  83 +
80 .card-pic { 84 .card-pic {
81 width: 100%; 85 width: 100%;
82 height: 499px; 86 height: 499px;
  87 +
83 a, 88 a,
84 img { 89 img {
85 display: block; 90 display: block;
@@ -87,6 +92,7 @@ @@ -87,6 +92,7 @@
87 height: 100%; 92 height: 100%;
88 } 93 }
89 } 94 }
  95 +
90 .card-bd { 96 .card-bd {
91 min-height: 180px; 97 min-height: 180px;
92 margin-left: 30px; 98 margin-left: 30px;
@@ -95,6 +101,7 @@ @@ -95,6 +101,7 @@
95 text-align: center; 101 text-align: center;
96 font-size: 24px; 102 font-size: 24px;
97 } 103 }
  104 +
98 .card-label { 105 .card-label {
99 margin: 0 0 10px; 106 margin: 0 0 10px;
100 font-size: 24px; 107 font-size: 24px;
@@ -103,17 +110,21 @@ @@ -103,17 +110,21 @@
103 } 110 }
104 } 111 }
105 112
  113 + .good-price-box {
  114 + white-space: nowrap;
  115 + }
  116 +
106 .good-price { 117 .good-price {
  118 + display: inline-block;
  119 + width: 50%;
107 color: #b0b0b0; 120 color: #b0b0b0;
108 - margin-right: 10px;  
109 - &:last-of-type {  
110 - margin-right: 0;  
111 - } 121 +
112 &.old-price { 122 &.old-price {
113 text-decoration: line-through; 123 text-decoration: line-through;
114 } 124 }
  125 +
115 &.sale-price { 126 &.sale-price {
116 - color: $red; 127 + color: #d0021b;
117 } 128 }
118 } 129 }
119 130
@@ -122,6 +133,7 @@ @@ -122,6 +133,7 @@
122 margin-top: 380px; 133 margin-top: 380px;
123 color: #b0b0b0; 134 color: #b0b0b0;
124 text-align: center; 135 text-align: center;
  136 +
125 .icon-search { 137 .icon-search {
126 display: inline-block; 138 display: inline-block;
127 font-size: 200px; 139 font-size: 200px;
@@ -51,6 +51,7 @@ module.exports = { @@ -51,6 +51,7 @@ module.exports = {
51 margin: 0; 51 margin: 0;
52 padding: 25px 0; 52 padding: 25px 0;
53 color: $grey; 53 color: $grey;
  54 + background-color: #fff;
54 } 55 }
55 56
56 .order-item { 57 .order-item {
@@ -59,6 +60,7 @@ module.exports = { @@ -59,6 +60,7 @@ module.exports = {
59 width: 25%; 60 width: 25%;
60 float: left; 61 float: left;
61 text-align: center; 62 text-align: center;
  63 +
62 &:after { 64 &:after {
63 content: "|"; 65 content: "|";
64 position: absolute; 66 position: absolute;
@@ -66,12 +68,15 @@ module.exports = { @@ -66,12 +68,15 @@ module.exports = {
66 color: $grey; 68 color: $grey;
67 font-size: 28px; 69 font-size: 28px;
68 } 70 }
  71 +
69 &:last-of-type:after { 72 &:last-of-type:after {
70 display: none; 73 display: none;
71 } 74 }
  75 +
72 .order-name { 76 .order-name {
73 font-size: 28px; 77 font-size: 28px;
74 } 78 }
  79 +
75 .order-icon { 80 .order-icon {
76 position: relative; 81 position: relative;
77 margin-left: 10px; 82 margin-left: 10px;
@@ -82,6 +87,7 @@ module.exports = { @@ -82,6 +87,7 @@ module.exports = {
82 top: 0; 87 top: 0;
83 } 88 }
84 } 89 }
  90 +
85 &.active { 91 &.active {
86 color: $black; 92 color: $black;
87 } 93 }
1 <template> 1 <template>
2 - <div class="focus"> 2 + <div class="focus-floor">
3 <swipe class="swipe swipe-{{floor.length}}"> 3 <swipe class="swipe swipe-{{floor.length}}">
4 <swipe-item v-for="item in floor" v-bind:style="{backgroundColor: item.bgColor}"> 4 <swipe-item v-for="item in floor" v-bind:style="{backgroundColor: item.bgColor}">
5 <a href="{{item.url}}" title="{{item.title}}"> 5 <a href="{{item.url}}" title="{{item.title}}">
@@ -24,8 +24,11 @@ @@ -24,8 +24,11 @@
24 </script> 24 </script>
25 25
26 <style> 26 <style>
27 - .focus { 27 + .focus-floor {
  28 + border-bottom: 1px solid #eee;
  29 +
28 .swipe { 30 .swipe {
  31 + position: relative;
29 height: 100%; 32 height: 100%;
30 } 33 }
31 34
@@ -39,6 +42,7 @@ @@ -39,6 +42,7 @@
39 a { 42 a {
40 display: block; 43 display: block;
41 } 44 }
  45 +
42 img { 46 img {
43 width: 100%; 47 width: 100%;
44 height: 100%; 48 height: 100%;
@@ -47,7 +51,7 @@ @@ -47,7 +51,7 @@
47 51
48 .swipe-indicators { 52 .swipe-indicators {
49 left: initial; 53 left: initial;
50 - right: 20px; 54 + right: -30px;
51 } 55 }
52 56
53 .swipe-indicator { 57 .swipe-indicator {
@@ -31,8 +31,10 @@ @@ -31,8 +31,10 @@
31 position: absolute; 31 position: absolute;
32 top: 0; 32 top: 0;
33 right: 0; 33 right: 0;
34 - width: 100px; 34 + max-width: 200px;
35 height: 100px; 35 height: 100px;
  36 + padding: 0 30px 0 0;
  37 + overflow: hidden;
36 } 38 }
37 } 39 }
38 </style> 40 </style>
@@ -6,7 +6,7 @@ @@ -6,7 +6,7 @@
6 <style> 6 <style>
7 .list-box { 7 .list-box {
8 position: fixed; 8 position: fixed;
9 - width: 45px; 9 + width: 30px;
10 margin: 0; 10 margin: 0;
11 padding: 6px 0; 11 padding: 6px 0;
12 right: 0; 12 right: 0;
@@ -49,7 +49,7 @@ @@ -49,7 +49,7 @@
49 </div> 49 </div>
50 </div> 50 </div>
51 </template> 51 </template>
52 -<style class="scss"> 52 +<style>
53 $bgcolor: #fff; 53 $bgcolor: #fff;
54 54
55 .editorial-page { 55 .editorial-page {
@@ -4,7 +4,7 @@ @@ -4,7 +4,7 @@
4 <div v-for="editorial in editorialList" class="editorial-box"> 4 <div v-for="editorial in editorialList" class="editorial-box">
5 <div class="img"> 5 <div class="img">
6 <a href='{{"/editorial/" + editorial.id + ".html"}}'> 6 <a href='{{"/editorial/" + editorial.id + ".html"}}'>
7 - <img v-lazy="editorial.src | resize 750 470" alt="" /> 7 + <img v-lazy="editorial.src | resize 750 469" alt="" />
8 </a> 8 </a>
9 </div> 9 </div>
10 <div class="title"><a class="line-clamp-2" href='{{"/editorial/" + editorial.id + ".html"}}'>{{editorial.title}}</a></div> 10 <div class="title"><a class="line-clamp-2" href='{{"/editorial/" + editorial.id + ".html"}}'>{{editorial.title}}</a></div>
@@ -37,7 +37,8 @@ @@ -37,7 +37,8 @@
37 37
38 .title { 38 .title {
39 background: #fff; 39 background: #fff;
40 - font-size: 32px; 40 + font-size: 42px;
  41 + line-height: 43px;
41 font-weight: 700; 42 font-weight: 700;
42 padding: 10px 20px; 43 padding: 10px 20px;
43 } 44 }
@@ -45,7 +46,9 @@ @@ -45,7 +46,9 @@
45 .editorial-des { 46 .editorial-des {
46 background: #fff; 47 background: #fff;
47 padding: 10px 20px; 48 padding: 10px 20px;
48 - color: #939393; 49 + color: #b0b0b0;
  50 + font-size: 28px;
  51 + line-height: 32px;
49 } 52 }
50 53
51 hr { 54 hr {
@@ -56,7 +59,8 @@ @@ -56,7 +59,8 @@
56 .bottom { 59 .bottom {
57 padding: 10px 20px; 60 padding: 10px 20px;
58 background: #fff; 61 background: #fff;
59 - color: #939393; 62 + color: #b0b0b0;
  63 + font-size: 24px;
60 64
61 .share { 65 .share {
62 float: right; 66 float: right;
@@ -78,7 +82,7 @@ @@ -78,7 +82,7 @@
78 return { 82 return {
79 contentCode: contentCode.editorial.all, 83 contentCode: contentCode.editorial.all,
80 editorialList: [], 84 editorialList: [],
81 - page: 0, 85 + page: 1,
82 scrollDisabled: false, 86 scrollDisabled: false,
83 channel: qs.channel 87 channel: qs.channel
84 }; 88 };
@@ -109,8 +113,12 @@ @@ -109,8 +113,12 @@
109 } else if (result.data.list.length > 0) { 113 } else if (result.data.list.length > 0) {
110 this.editorialList = result.data.list; 114 this.editorialList = result.data.list;
111 } 115 }
112 - this.page++;  
113 - this.scrollDisabled = false; 116 +
  117 + // 如果未加载完，继续翻页加载
  118 + if (result.data.list.length > 0) {
  119 + this.page++;
  120 + this.scrollDisabled = false;
  121 + }
114 } else { 122 } else {
115 tip('没有了...'); 123 tip('没有了...');
116 } 124 }
@@ -120,13 +128,13 @@ @@ -120,13 +128,13 @@
120 }, 128 },
121 129
122 /* 分享资讯 */ 130 /* 分享资讯 */
123 - share(title, des, img, url) { 131 + share(title, des, img, id) {
124 img = util.getImgUrl(img, 300, 300, 2); 132 img = util.getImgUrl(img, 300, 300, 2);
125 yoho.goShare({ 133 yoho.goShare({
126 title: title, 134 title: title,
127 des: des, 135 des: des,
128 img: img, 136 img: img,
129 - url: `//m.yohoblk.com/editorial/${id}.html` 137 + url: `${location.origin}/editorial/${id}.html`
130 }); 138 });
131 } 139 }
132 }, 140 },
@@ -95,7 +95,7 @@ @@ -95,7 +95,7 @@
95 title: this.article.articleTitle, 95 title: this.article.articleTitle,
96 des: '优质精选,BLK潮流资讯为你呈现', 96 des: '优质精选,BLK潮流资讯为你呈现',
97 img: util.getImgUrl(this.article.coverImage, 300, 300, 2), 97 img: util.getImgUrl(this.article.coverImage, 300, 300, 2),
98 - url: `//m.yohoblk.com/editorial/${this.article.id}.html` 98 + url: `${location.origin}/editorial/${this.article.id}.html`
99 }); 99 });
100 } 100 }
101 }, 101 },
@@ -7,6 +7,7 @@ @@ -7,6 +7,7 @@
7 .top-nav { 7 .top-nav {
8 .blk-header { 8 .blk-header {
9 background-color: transparent; 9 background-color: transparent;
  10 + border-bottom: 0;
10 } 11 }
11 12
12 .blk-header-gap { 13 .blk-header-gap {
@@ -3,7 +3,6 @@ @@ -3,7 +3,6 @@
3 <cheader title="新品抢先看"> 3 <cheader title="新品抢先看">
4 <i class="icon icon-filter" slot="right" @click="openFilter"></i> 4 <i class="icon icon-filter" slot="right" @click="openFilter"></i>
5 </cheader> 5 </cheader>
6 - <order :config="orderConfig" :val="order" v-if="enableOrder"></order>  
7 <List :data="productList" :empty="empty"></List> 6 <List :data="productList" :empty="empty"></List>
8 <Filter :config="filterConfig" action="/product/list.json" v-ref:filter></Filter> 7 <Filter :config="filterConfig" action="/product/list.json" v-ref:filter></Filter>
9 </div> 8 </div>
@@ -17,7 +16,6 @@ @@ -17,7 +16,6 @@
17 const bus = require('common/vue-bus'); 16 const bus = require('common/vue-bus');
18 const tip = require('common/tip'); 17 const tip = require('common/tip');
19 const cheader = require('component/header.vue'); 18 const cheader = require('component/header.vue');
20 - const order = require('component/product/order.vue');  
21 const list = require('component/product/list.vue'); 19 const list = require('component/product/list.vue');
22 const filter = require('component/product/filter.vue'); 20 const filter = require('component/product/filter.vue');
23 21
@@ -32,12 +30,10 @@ @@ -32,12 +30,10 @@
32 data: function() { 30 data: function() {
33 return { 31 return {
34 sortName: locationQuery.sort_name, 32 sortName: locationQuery.sort_name,
35 - orderConfig: [],  
36 filterConfig: null, 33 filterConfig: null,
37 34
38 // query 35 // query
39 url: '/product/new.json', 36 url: '/product/new.json',
40 - order: '',  
41 filter: {}, 37 filter: {},
42 page: 0, // 未搜索 page=0; 全部加载完 page = totalPage; 无数据: page !=0 && productList.length=0 38 page: 0, // 未搜索 page=0; 全部加载完 page = totalPage; 无数据: page !=0 && productList.length=0
43 totalPage: null, 39 totalPage: null,
@@ -46,8 +42,7 @@ @@ -46,8 +42,7 @@
46 productList: [], 42 productList: [],
47 43
48 // state 44 // state
49 - inSearching: false, // 请求中  
50 - enableOrder: false 45 + inSearching: false // 请求中
51 }; 46 };
52 }, 47 },
53 computed: { 48 computed: {
@@ -58,7 +53,6 @@ @@ -58,7 +53,6 @@
58 components: { 53 components: {
59 cheader, 54 cheader,
60 list, 55 list,
61 - order,  
62 filter 56 filter
63 }, 57 },
64 methods: { 58 methods: {
@@ -78,7 +72,6 @@ @@ -78,7 +72,6 @@
78 72
79 this.inSearching = true; 73 this.inSearching = true;
80 return $.get(this.url, Object.assign({ 74 return $.get(this.url, Object.assign({
81 - order: this.order,  
82 page: nextPage 75 page: nextPage
83 }, this.filter, locationQuery)) 76 }, this.filter, locationQuery))
84 .done(res => { 77 .done(res => {
@@ -118,10 +111,6 @@ @@ -118,10 +111,6 @@
118 } 111 }
119 }, 112 },
120 watch: { 113 watch: {
121 - /* order 和 filter 改变 都会触发 重新搜索 */  
122 - order: function() {  
123 - this.research();  
124 - },  
125 filter: function() { 114 filter: function() {
126 this.research(); 115 this.research();
127 } 116 }
@@ -135,11 +124,6 @@ @@ -135,11 +124,6 @@
135 self.search(); 124 self.search();
136 }); 125 });
137 126
138 - bus.$on('order.change', function({val}) {  
139 - console.log(val);  
140 - self.order = val;  
141 - });  
142 -  
143 /** 127 /**
144 * 筛选组件 筛选值变更，触发 filter.change事件 128 * 筛选组件 筛选值变更，触发 filter.change事件
145 * 1. 重新搜索 129 * 1. 重新搜索
@@ -158,12 +142,7 @@ @@ -158,12 +142,7 @@
158 self.$refs.filter.isVisible = false; 142 self.$refs.filter.isVisible = false;
159 }); 143 });
160 144
161 - this.search()  
162 - .then(()=>{  
163 - if (self.productList.length) {  
164 - self.enableOrder = true;  
165 - }  
166 - }); 145 + this.search();
167 } 146 }
168 }; 147 };
169 148
@@ -14,6 +14,7 @@ @@ -14,6 +14,7 @@
14 .blk-header { 14 .blk-header {
15 background-color: transparent; 15 background-color: transparent;
16 color: #fff; 16 color: #fff;
  17 + border-bottom: 0;
17 } 18 }
18 19
19 .blk-header-gap { 20 .blk-header-gap {
@@ -116,7 +117,7 @@ @@ -116,7 +117,7 @@
116 }, 117 },
117 created() { 118 created() {
118 this.domain = this.shareData.domain; 119 this.domain = this.shareData.domain;
119 - window.onscroll = this.changeTopStatus.bind(this); 120 + window.onscroll = this.changeTopStatus;
120 } 121 }
121 }; 122 };
122 </script> 123 </script>