fe / yoho-activitys · Commits

Go to a project

Authored by huangyi
Commit 61d0f7c26adecb4a5917098177dfffda0ed38f5c 1 parent 2d2ecf84

新品活动，分享修改

Inline Side-by-side
Showing 11 changed files with 182 additions and 31 deletions
@@ -4,7 +4,7 @@ @@ -4,7 +4,7 @@
4 <meta charset="UTF-8"> 4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
6 <meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge"> 6 <meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge">
7 - <title></title> 7 + <title><%= htmlWebpackPlugin.options.title %></title>
8 <script> 8 <script>
9 (function(win) { 9 (function(win) {
10 var doc = win.document; 10 var doc = win.document;
1 module.exports = { 1 module.exports = {
2 production: { 2 production: {
3 routerPath: '/html5/2018/09/guochao', 3 routerPath: '/html5/2018/09/guochao',
4 - domain: '//action.yoho.cn' 4 + domain: 'https://action.yoho.cn'
5 }, 5 },
6 development: { 6 development: {
7 routerPath: '/html5/2018/09/guochao', 7 routerPath: '/html5/2018/09/guochao',
@@ -5,8 +5,8 @@ import config from './config'; @@ -5,8 +5,8 @@ import config from './config';
5 import {BrowserRouter, Route,Switch,HashRouter,hashHistory,browserHistory} from 'react-router-dom'; 5 import {BrowserRouter, Route,Switch,HashRouter,hashHistory,browserHistory} from 'react-router-dom';
6 6
7 // import guochaoHome from './view/guochaoHome'; 7 // import guochaoHome from './view/guochaoHome';
8 -// import top40 from './view/top40';1  
9 -1 8 +// import top40 from './view/top40';
  9 +
10 import Loadable from 'react-loadable'; 10 import Loadable from 'react-loadable';
11 11
12 const guochaoHome = Loadable({ 12 const guochaoHome = Loadable({
@@ -2,6 +2,7 @@ import React, {PureComponent} from 'react'; @@ -2,6 +2,7 @@ import React, {PureComponent} from 'react';
2 import './index.scss' 2 import './index.scss'
3 import {collectApi, checkFavApi} from '../../api/guochaoApi' 3 import {collectApi, checkFavApi} from '../../api/guochaoApi'
4 import {getQueryObj, linkToMiniApp, invokeMethod, parseUrl} from '../../../../../common/utils'; 4 import {getQueryObj, linkToMiniApp, invokeMethod, parseUrl} from '../../../../../common/utils';
  5 +import wxshare from '../../../../../common/wxshare'
5 import wx from 'weixin-js-sdk'; 6 import wx from 'weixin-js-sdk';
6 import config from '../../config'; 7 import config from '../../config';
7 import cookie from 'react-cookies'; 8 import cookie from 'react-cookies';
@@ -9,6 +10,7 @@ import LazyLoad from 'react-lazy-load' @@ -9,6 +10,7 @@ import LazyLoad from 'react-lazy-load'
9 10
10 export default class guochaoHome extends PureComponent { 11 export default class guochaoHome extends PureComponent {
11 constructor(props) { 12 constructor(props) {
  13 + document.title ='中西碰撞 潮流无界'
12 super(props); 14 super(props);
13 this.state = { 15 this.state = {
14 env: '', 16 env: '',
@@ -18,15 +20,26 @@ export default class guochaoHome extends PureComponent { @@ -18,15 +20,26 @@ export default class guochaoHome extends PureComponent {
18 } 20 }
19 this.scrollTop = this.scrollTop.bind(this); 21 this.scrollTop = this.scrollTop.bind(this);
20 this.init(); 22 this.init();
21 - document.title = "中西碰撞"; 23 + let shareData={
  24 + title: '国潮崛起年，中西碰撞博出位！',
  25 + imgUrl: 'https://img01.yohoboys.com/o_1cnilugbs15ajak1gfo1d2h1p348.png?imageView2/1/w/200/h/200',
  26 + desc: '这里有一份中西潮流榜单，请收好！',
  27 + link: 'https://ad.yoho.cn/html5/2018/09/guochao/guochao.html',
  28 + success: function () {
  29 +
  30 + }
  31 + }
  32 + wxshare(shareData);
22 } 33 }
23 34
24 init = async () => { 35 init = async () => {
25 - if(!cookie.load('app_uid') || !parseInt(cookie.load('app_uid'))){ 36 + let uid = cookie.load('app_uid') || getQueryObj().uid || 0;
  37 + if(!uid || !parseInt(uid)){
26 return; 38 return;
27 } 39 }
  40 +
28 let result = await checkFavApi({ 41 let result = await checkFavApi({
29 - uid: cookie.load('app_uid') || getQueryObj().uid || 0, 42 + uid: uid,
30 sessionKey: cookie.load('app_session_key') || getQueryObj().session_key || '', 43 sessionKey: cookie.load('app_session_key') || getQueryObj().session_key || '',
31 sessionType: cookie.load('app_client_type') || '', 44 sessionType: cookie.load('app_client_type') || '',
32 appVersion: cookie.load('app_version') || '' 45 appVersion: cookie.load('app_version') || ''
@@ -146,7 +159,7 @@ export default class guochaoHome extends PureComponent { @@ -146,7 +159,7 @@ export default class guochaoHome extends PureComponent {
146 if (wx.miniProgram.postMessage) { 159 if (wx.miniProgram.postMessage) {
147 wx.miniProgram.postMessage({ 160 wx.miniProgram.postMessage({
148 data: { 161 data: {
149 - title: '中西碰撞' 162 + title: '中西碰撞 潮流无界'
150 } 163 }
151 }); 164 });
152 } 165 }
@@ -171,7 +184,7 @@ export default class guochaoHome extends PureComponent { @@ -171,7 +184,7 @@ export default class guochaoHome extends PureComponent {
171 return ( 184 return (
172 <div className='wrap'> 185 <div className='wrap'>
173 <a id='url' href={url}></a> 186 <a id='url' href={url}></a>
174 - <a href={config.routerPath + '/top40.html'} className='top40'></a> 187 + <a data-url={config.routerPath + '/top40.html'} onClick={linkToMiniApp} href={env === "miniprogram" ? 'javascript:void(0)' : config.routerPath + '/top40.html?openby:yohobuy={"action": "go.h5", "params": {"url": "' + location.origin + config.routerPath + '/top40.html", "title": "中西碰撞 潮流无界"}}'} className='top40'></a>
175 <div onClick={this.scrollTop} className={this.state.display ? 'toTop' : ''}></div> 188 <div onClick={this.scrollTop} className={this.state.display ? 'toTop' : ''}></div>
176 <div className='header'> 189 <div className='header'>
177 </div> 190 </div>
@@ -23,13 +23,15 @@ @@ -23,13 +23,15 @@
23 position: relative; 23 position: relative;
24 } 24 }
25 .top40{ 25 .top40{
  26 + -webkit-tap-highlight-color: transparent;
  27 + cursor:pointer;
26 width: 1.7rem; 28 width: 1.7rem;
27 background-image: url(//img01.yohoboys.com/o_1cn6aonraub5s6mg6511t96no8.png) !important; 29 background-image: url(//img01.yohoboys.com/o_1cn6aonraub5s6mg6511t96no8.png) !important;
28 background-repeat: no-repeat !important; 30 background-repeat: no-repeat !important;
29 background-size: cover !important; 31 background-size: cover !important;
30 height: 5rem; 32 height: 5rem;
31 position: fixed; 33 position: fixed;
32 - z-index: 2; 34 + z-index: 7;
33 right: 0.25rem; 35 right: 0.25rem;
34 top: 12.5rem; 36 top: 12.5rem;
35 } 37 }
@@ -45,28 +47,28 @@ @@ -45,28 +47,28 @@
45 right: 1rem; 47 right: 1rem;
46 } 48 }
47 .part1{ 49 .part1{
48 - background:url("//img01.yohoboys.com/o_1cmknihct81g12q1u686na16mt8.jpg?imageMogr2/strip/thumbnail/750") no-repeat; 50 + background:url("//img01.yohoboys.com/o_1cmknihct81g12q1u686na16mt8.jpg?imageMogr2/strip/thumbnail/750&imageslim") no-repeat;
49 height: 57.2rem; 51 height: 57.2rem;
50 width:100%; 52 width:100%;
51 background-size:cover; 53 background-size:cover;
52 position: relative; 54 position: relative;
53 } 55 }
54 .part2{ 56 .part2{
55 - background:url("//img01.yohoboys.com/o_1cmlb2qke4cb1jko1rb7losdf68.jpg?imageMogr2/strip/thumbnail/750") no-repeat; 57 + background:url("//img01.yohoboys.com/o_1cmlb2qke4cb1jko1rb7losdf68.jpg?imageMogr2/strip/thumbnail/750&imageslim") no-repeat;
56 height: 59.8rem; 58 height: 59.8rem;
57 width:100%; 59 width:100%;
58 background-size:cover; 60 background-size:cover;
59 position: relative; 61 position: relative;
60 } 62 }
61 .part3{ 63 .part3{
62 - background: url("//img01.yohoboys.com/o_1cn3vs0frhlv3s81lt51kp4k6a8.jpg?imageMogr2/strip/thumbnail/750"); 64 + background: url("//img01.yohoboys.com/o_1cn3vs0frhlv3s81lt51kp4k6a8.jpg?imageMogr2/strip/thumbnail/750&imageslim");
63 height: 58.7rem; 65 height: 58.7rem;
64 width:100%; 66 width:100%;
65 background-size:cover; 67 background-size:cover;
66 position: relative; 68 position: relative;
67 } 69 }
68 .part4{ 70 .part4{
69 - background: url("//img01.yohoboys.com/o_1cn3vh086i0h5n6vsk1akcl988.jpg?imageMogr2/strip/thumbnail/750"); 71 + background: url("//img01.yohoboys.com/o_1cn3vh086i0h5n6vsk1akcl988.jpg?imageMogr2/strip/thumbnail/750&imageslim");
70 height: 60.6rem; 72 height: 60.6rem;
71 width:100%; 73 width:100%;
72 background-size:cover; 74 background-size:cover;
@@ -101,6 +103,9 @@ @@ -101,6 +103,9 @@
101 position: absolute; 103 position: absolute;
102 } 104 }
103 .unclick { 105 .unclick {
  106 + z-index: 5;
  107 + -webkit-tap-highlight-color: transparent;
  108 + cursor:pointer;
104 position: absolute; 109 position: absolute;
105 border-radius: 0.17rem; 110 border-radius: 0.17rem;
106 width: 2.43rem; 111 width: 2.43rem;
1 import React, {PureComponent} from 'react'; 1 import React, {PureComponent} from 'react';
2 import './index.scss' 2 import './index.scss'
3 import {guochaoListApi} from '../../api/guochaoApi' 3 import {guochaoListApi} from '../../api/guochaoApi'
4 -import {getEnv, linkToMiniApp} from "../../../../../common/utils"; 4 +import {getEnv, linkToMiniApp, invokeMethod} from "../../../../../common/utils";
5 import { Link } from 'react-router-dom' 5 import { Link } from 'react-router-dom'
6 import wx from "weixin-js-sdk"; 6 import wx from "weixin-js-sdk";
7 import config from "../../config"; 7 import config from "../../config";
  8 +import wxshare from "../../../../../common/wxshare";
  9 +
8 10
9 export default class top40 extends PureComponent { 11 export default class top40 extends PureComponent {
10 constructor(props) { 12 constructor(props) {
  13 + document.title ='中西碰撞 潮流无界'
11 super(props); 14 super(props);
12 this.state = { 15 this.state = {
13 env:'', 16 env:'',
@@ -16,7 +19,16 @@ export default class top40 extends PureComponent { @@ -16,7 +19,16 @@ export default class top40 extends PureComponent {
16 } 19 }
17 this.init(); 20 this.init();
18 this.scrollTop = this.scrollTop.bind(this); 21 this.scrollTop = this.scrollTop.bind(this);
19 - document.title = '潮流无界'; 22 + let shareData={
  23 + title: '国潮崛起年，中西碰撞博出位！',
  24 + imgUrl: 'https://img01.yohoboys.com/o_1cnilugbs15ajak1gfo1d2h1p348.png?imageView2/1/w/200/h/200',
  25 + desc: '这里有一份中西潮流榜单，请收好！',
  26 + link: 'https://ad.yoho.cn/html5/2018/09/guochao/40.html',
  27 + success: function () {
  28 +
  29 + }
  30 + }
  31 + wxshare(shareData);
20 } 32 }
21 33
22 async init() { 34 async init() {
@@ -60,22 +72,38 @@ export default class top40 extends PureComponent { @@ -60,22 +72,38 @@ export default class top40 extends PureComponent {
60 72
61 73
62 wxReady= async ()=> { 74 wxReady= async ()=> {
63 - let envFlag = await getEnv();  
64 - if (!envFlag && navigator.userAgent.match(/miniProgram/i)) {  
65 - this.setState({env:"miniprogram"});  
66 - envFlag = true; 75 + let envFlag = window.__wxjs_environment;
  76 + if (!envFlag && navigator.userAgent.match(/yohobuy/i)) {
  77 + document.addEventListener('deviceready', function () {
  78 + });
  79 + this.setState({env: "app"});
  80 + } else if (!envFlag && navigator.userAgent.match(/miniProgram/i)) {
  81 + this.setState({env: "miniprogram"});
  82 + envFlag = true
  83 + } else {
  84 + this.setState({env: 'h5'})
67 } 85 }
68 if (envFlag) { 86 if (envFlag) {
69 if (wx.miniProgram.postMessage) { 87 if (wx.miniProgram.postMessage) {
70 wx.miniProgram.postMessage({ 88 wx.miniProgram.postMessage({
71 data: { 89 data: {
72 - title: '潮流无界' 90 + title: '中西碰撞 潮流无界'
73 } 91 }
74 }); 92 });
75 } 93 }
76 - this.setState({env:"miniprogram"}); 94 + this.setState({env: "miniprogram"});
77 } 95 }
78 }; 96 };
  97 + goBack = () =>{
  98 + if(this.state.env === 'app'){
  99 + invokeMethod({method:'go.back'})
  100 + }else if(this.state.env === 'miniprogram'){
  101 + wx.miniProgram.navigateBack();
  102 + }else{
  103 + history.go(-1);
  104 + }
  105 + }
  106 +
79 render() { 107 render() {
80 let {data ,env} = this.state; 108 let {data ,env} = this.state;
81 let list = (data, select) =>{ 109 let list = (data, select) =>{
@@ -94,7 +122,7 @@ export default class top40 extends PureComponent { @@ -94,7 +122,7 @@ export default class top40 extends PureComponent {
94 } 122 }
95 return ( 123 return (
96 <div className='wrap'> 124 <div className='wrap'>
97 - <a href={config.routerPath+'/guochao.html'} className='back'></a> 125 + <a onClick={()=>{this.goBack()}} className='back'></a>
98 <div onClick={this.scrollTop} className={this.state.display?'toTop':''}></div> 126 <div onClick={this.scrollTop} className={this.state.display?'toTop':''}></div>
99 <div className='up'> 127 <div className='up'>
100 {list(data,0)} 128 {list(data,0)}
@@ -15,6 +15,8 @@ @@ -15,6 +15,8 @@
15 flex-direction: row; 15 flex-direction: row;
16 flex-wrap: wrap; 16 flex-wrap: wrap;
17 justify-content: space-between; 17 justify-content: space-between;
  18 + -webkit-tap-highlight-color: transparent;
  19 + cursor:pointer;
18 20
19 .item { 21 .item {
20 width: 260px; 22 width: 260px;
@@ -35,6 +37,9 @@ @@ -35,6 +37,9 @@
35 flex-direction: row; 37 flex-direction: row;
36 flex-wrap: wrap; 38 flex-wrap: wrap;
37 justify-content: flex-start; 39 justify-content: flex-start;
  40 + -webkit-tap-highlight-color: transparent;
  41 + cursor:pointer;
  42 +
38 .item { 43 .item {
39 width: 216px; 44 width: 216px;
40 img { 45 img {
@@ -54,6 +59,8 @@ @@ -54,6 +59,8 @@
54 right: 2.7rem; 59 right: 2.7rem;
55 } 60 }
56 .back { 61 .back {
  62 + -webkit-tap-highlight-color: transparent;
  63 + cursor:pointer;
57 width: 2.4rem; 64 width: 2.4rem;
58 background-image: url(//img01.yohoboys.com/o_1cn4gic5h1hfr7nqcregn72ga8.png) !important; 65 background-image: url(//img01.yohoboys.com/o_1cn4gic5h1hfr7nqcregn72ga8.png) !important;
59 background-repeat: no-repeat !important; 66 background-repeat: no-repeat !important;
@@ -17,7 +17,8 @@ export default merge(baseConfig, { @@ -17,7 +17,8 @@ export default merge(baseConfig, {
17 // }), 17 // }),
18 new HtmlWebpackPlugin({ 18 new HtmlWebpackPlugin({
19 filename: 'top40.html', 19 filename: 'top40.html',
20 - template: './app/guoChao/index.html', 20 + template: './app/guoChao/index.ejs',
  21 + title:"中西碰撞 潮流无界",
21 inject: true, 22 inject: true,
22 minify: { 23 minify: {
23 removeComments: true, 24 removeComments: true,
@@ -27,7 +28,8 @@ export default merge(baseConfig, { @@ -27,7 +28,8 @@ export default merge(baseConfig, {
27 }), 28 }),
28 new HtmlWebpackPlugin({ 29 new HtmlWebpackPlugin({
29 filename: 'guochao.html', 30 filename: 'guochao.html',
30 - template: './app/guoChao/index.html', 31 + template: './app/guoChao/index.ejs',
  32 + title:"中西碰撞 潮流无界",
31 inject: true, 33 inject: true,
32 minify: { 34 minify: {
33 removeComments: true, 35 removeComments: true,
1 -import _ from 'lodash';  
2 import wx from 'weixin-js-sdk'; 1 import wx from 'weixin-js-sdk';
3 2
4 const linkToMiniApp = (event) => { 3 const linkToMiniApp = (event) => {
@@ -15,10 +14,9 @@ const linkToMiniApp = (event) => { @@ -15,10 +14,9 @@ const linkToMiniApp = (event) => {
15 let base_url = decodeURIComponent(url).split('?')[0]; 14 let base_url = decodeURIComponent(url).split('?')[0];
16 let params = getQueryObj(url); 15 let params = getQueryObj(url);
17 let paramStr = ''; 16 let paramStr = '';
18 -  
19 - _.each(params, (val, key) => {  
20 - paramStr += paramStr === '' ? '?' + key + '=' + val : '&' + key + '=' + val;  
21 - }); 17 + Object.keys(params).forEach(key => {
  18 + paramStr += paramStr === '' ? '?' + key + '=' + params[key] : '&' + key + '=' + params[key];
  19 + })
22 20
23 let mini_url = '/pages/webview/webview?url=' + base_url; 21 let mini_url = '/pages/webview/webview?url=' + base_url;
24 let scene = mini_url + encodeURIComponent(paramStr); 22 let scene = mini_url + encodeURIComponent(paramStr);
  1 +//初始化config信息
  2 +import httpServer from './httpService';
  3 +import wx from "weixin-js-sdk";
  4 +
  5 +const _weChatInterface = '//action.yoho.cn/api/share/getSignPackage';//签名等相关配置，yoho公众号
  6 +module.exports = function wxCheck(shareDate) {
  7 + httpServer.get(_weChatInterface + "?pageurl=" + encodeURIComponent(location.href.split('#')[0])).then((json) => {
  8 + if (json !== undefined && json !== '') {
  9 + var _appId = json.appId.toString();
  10 + var _timestamp = json.timestamp;
  11 + var _nonceStr = json.nonceStr.toString();
  12 + var _signature = json.signature.toString();
  13 + wx.config({
  14 + debug: false,
  15 + appId: _appId,
  16 + timestamp: _timestamp,
  17 + nonceStr: _nonceStr,
  18 + signature: _signature,
  19 + jsApiList: [
  20 + 'checkJsApi',
  21 + 'onMenuShareTimeline',
  22 + 'onMenuShareAppMessage',
  23 + 'onMenuShareQQ',
  24 + 'onMenuShareWeibo',
  25 + 'hideMenuItems',
  26 + 'showMenuItems',
  27 + 'hideAllNonBaseMenuItem',
  28 + 'showAllNonBaseMenuItem',
  29 + 'translateVoice',
  30 + 'startRecord',
  31 + 'stopRecord',
  32 + 'onVoiceRecordEnd',
  33 + 'playVoice',
  34 + 'pauseVoice',
  35 + 'stopVoice',
  36 + 'uploadVoice',
  37 + 'onVoicePlayEnd',
  38 + 'downloadVoice',
  39 + 'chooseImage',
  40 + 'previewImage',
  41 + 'uploadImage',
  42 + 'downloadImage',
  43 + 'getNetworkType',
  44 + 'openLocation',
  45 + 'getLocation',
  46 + 'hideOptionMenu',
  47 + 'showOptionMenu',
  48 + 'closeWindow',
  49 + 'scanQRCode',
  50 + 'chooseWXPay',
  51 + 'openProductSpecificView',
  52 + 'addCard',
  53 + 'chooseCard',
  54 + 'openCard'
  55 + ]
  56 + });
  57 +
  58 + let share_data = shareDate || {
  59 + title: '',
  60 + imgUrl: '',
  61 + desc: '',
  62 + link: document.location.href,
  63 + success: function(){}
  64 + };
  65 +
  66 + function share() {
  67 + wx.ready(function () {
  68 + //构造分享信息
  69 + var shareData = share_data;
  70 +
  71 + var voice_localId = '';
  72 + var is_start = false;
  73 +
  74 + // 2.1 “分享给朋友”
  75 + wx.onMenuShareAppMessage(shareData);
  76 +
  77 + // 2.2 “分享到朋友圈”
  78 + wx.onMenuShareTimeline(shareData);
  79 +
  80 + // 2.3 “分享到QQ”
  81 + wx.onMenuShareQQ(shareData);
  82 +
  83 + // 2.4 “分享到微博”
  84 + wx.onMenuShareWeibo(shareData);
  85 + //document.getElementById('media').play();
  86 +
  87 + //bindUploadEvent();
  88 + });
  89 + }
  90 +
  91 + setTimeout(share, 1000);
  92 + }
  93 + else {
  94 +
  95 + }
  96 + })
  97 +}
  98 +
@@ -73,7 +73,7 @@ module.exports = { @@ -73,7 +73,7 @@ module.exports = {
73 port: 8080, 73 port: 8080,
74 disableHostCheck: true, 74 disableHostCheck: true,
75 }, 75 },
76 - devtool: "cheap-eval-source-map", 76 + devtool: "source-map",
77 //模块路径 77 //模块路径
78 resolve:{ 78 resolve:{
79 alias: { 79 alias: {