Authored by 陈峰

commit

... ... @@ -18,8 +18,11 @@ export default {
},
methods: {
...mapActions(['postComment']),
openComentInput() {
const hint = this.user ? `回复${this.user}:` : '';
async openComentInput() {
const user = await this.$sdk.getUser();
if (user && user.uid) {
const hint = this.user ? `回复${this.user}:` : '评论:';
if (this.$yoho.isYohoBuy) {
this.$yoho.getInput({hint}, (content) => {
... ... @@ -39,6 +42,9 @@ export default {
}
}).show();
}
} else {
this.$sdk.goLogin();
}
},
async comment(content) {
const result = await this.postComment({
... ...
export default {
name: 'AuthComponent',
props: {
tag: String,
auth: {
type: Boolean,
default: true
}
},
methods: {
async onClick() {
if (!this.auth) {
return this.$emit('click');
}
const user = await this.$sdk.getUser();
if (user && user.uid) {
this.$emit('click', {uid: user.uid});
} else {
this.$emit('cancel');
this.$sdk.goLogin();
}
}
},
render(h) {
return h(this.tag || 'div', {
on: {
click: this.onClick.bind(this)
}
}, this.$slots.default);
}
};
... ...
... ... @@ -2,10 +2,12 @@ import Layout from './layout';
import LayoutHeader from './layout-header';
import LayoutRecycleList from './layout-recycle-list';
import RecycleList from './recycle-list';
import AuthComponent from './auth-component';
export default [
Layout,
LayoutHeader,
LayoutRecycleList,
RecycleList,
AuthComponent,
];
... ...
... ... @@ -10,10 +10,10 @@
<p class="price">¥{{product.salesPrice}}</p>
</div>
</div>
<div
<AuthComponent
class="btn-fav hover-opacity"
@click.stop="onFav"
:class="favClass">{{favText}}</div>
@click="onFav"
:class="favClass">{{favText}}</AuthComponent>
</div>
</template>
... ... @@ -50,10 +50,6 @@ export default {
methods: {
...mapActions(['postProductFav']),
async onFav() {
if (!this.auth()) {
return;
}
if (this.posting) {
return;
}
... ...
<template>
<div class="btn-follow hover-opacity" :class="followClass" @click="onFollow">{{followText}}</div>
<AuthComponent class="btn-follow hover-opacity" :class="followClass" @click="onFollow">{{followText}}</AuthComponent>
</template>
<script>
... ... @@ -41,10 +41,6 @@ export default {
methods: {
...mapActions(['followUser']),
async onFollow() {
if (!this.auth()) {
return;
}
if (this.loading) {
return;
}
... ...
<template>
<div class="icon-btn" @click="onClick" :style="btnStyle">
<AuthComponent :auth="isAuth" class="icon-btn" @click="onClick" :style="btnStyle">
<i class="iconfont" :class="iconClass" :style="iconStyle"></i>
<p v-if="viewText" class="icon-btn-text" :style="textStyle">
<span class="view-text">{{viewText}}</span>
<span class="placeholder-text">{{placText}}</span>
</p>
</div>
</AuthComponent>
</template>
<script>
import {forEach, get, fill} from 'lodash';
import {createNamespacedHelpers} from 'vuex';
const {mapActions} = createNamespacedHelpers('user');
import {forEach, fill} from 'lodash';
import {createNamespacedHelpers} from 'vuex';
const {mapActions} = createNamespacedHelpers('user');
const classMap = {
const classMap = {
fav: {
default: 'icon-zan',
selected: 'icon-zan-fill'
... ... @@ -28,9 +28,9 @@
msg: {
default: 'icon-msg'
}
};
};
const defaultOption = {
const defaultOption = {
canSelect: true, // 是否支持选中
selected: false, // 初始选中状态(不受是否支持选中控制)
color: '#444', // btn字体颜色
... ... @@ -42,9 +42,9 @@
textZoom: 0.9, // text缩放
textAutoChange: true, // text自动增减,只支持number类型(受是否支持选中控制)
emitName: '' // 点击触发事件名称
};
};
export default {
export default {
name: 'WidgetIconBtn',
props: {
type: {
... ... @@ -72,7 +72,7 @@
btnSelected: false,
actionClass: '',
editText: null
}
};
},
created() {
forEach(defaultOption, (value, key) => {
... ... @@ -81,6 +81,20 @@
this.viewOption = {...this.viewOption};
},
computed: {
syncFnName() {
if (this.articleId) {
if (this.type === 'fav') {
return 'praiseArticle';
} else if (this.type === 'star') {
return 'followArticle';
}
} else if (this.commentId && this.type === 'fav') {
return 'praiseComment';
}
},
isAuth() {
return !!this.syncFnName;
},
btnStyle() {
let color = this.viewOption.color || defaultOption.color;
... ... @@ -90,19 +104,17 @@
if (this.actionClass) {
return this.actionClass;
}
if (!this._icon) {
this._type = classMap[this.type] ? this.type : 'fav'
this._icon = classMap[this._type];
}
if (classMap[this.type]) {
const currentClass = classMap[this.type];
if (this.viewOption.selected) {
this.btnSelected = true;
return this._icon.selected || this._icon.default;
return currentClass.selected || currentClass.default;
}
return this._icon.default;
return currentClass.default;
}
},
iconStyle() {
return `font-size: ${this.pxToRem(this.viewOption.iconFontSize)};`;
... ... @@ -145,7 +157,7 @@
const rootValue = 40;
if (typeof px !== 'number') {
px = parseInt(`0${px}`);
px = parseInt(`0${px}`, 10);
}
if (px > 2) {
... ... @@ -158,15 +170,13 @@
this.btnSelected = !this.btnSelected;
if (this.viewOption.textAutoChange) {
let _text = this.editText || this.text;
if (!isNaN(Number(this.viewText))) {
this.editText = Number(this.viewText) + (this.btnSelected ? 1 : -1);
}
}
if (this._icon.selected) {
this.actionClass = this.btnSelected ? this._icon.selected : this._icon.default;
if (classMap[this.type]) {
this.actionClass = this.btnSelected ? classMap[this.type].selected : classMap[this.type].default;
}
},
syncService(type, data) {
... ... @@ -183,56 +193,32 @@
if (this.viewOption.canSelect) {
this.changeBtnStatus();
let syncFnName = '';
if (this.articleId) {
if (this._type === 'fav') {
syncFnName = 'praiseArticle';
} else if (this._type === 'star') {
syncFnName = 'followArticle';
}
} else if (this.commentId && this._type === 'fav') {
syncFnName = 'praiseComment';
}
if (syncFnName) {
if (!this.auth()) {
return this.changeBtnStatus();
}
const backFn = (res) => {
this.syncing = false;
if (res.code !== 200) {
this.changeBtnStatus();
if (res.code === 401) {
// TODO go_login
} else {
this.$createToast && this.$createToast({
txt: res.message || '服务器开小差了',
type: 'warn',
time: 1000
}).show();
}
}
};
this.syncing = true;
this.syncService(syncFnName, {
this.syncService(this.syncFnName, {
articleId: this.articleId,
commentId: this.commentId,
status: this.btnSelected
}).then(backFn).catch(backFn);
}
}
this.viewOption.emitName && this.$emit(this.viewOption.emitName, evt);
}
},
};
};
</script>
<style type="scss">
... ...
... ... @@ -10,6 +10,7 @@ import {get} from 'lodash';
import Lazy from 'vue-lazyload';
import yoho from 'common/yoho';
import sdk from 'common/sdk';
import InitClient from 'utils/init-client';
import 'statics/scss/common.scss';
import 'statics/scss/grass-prompt.scss';
import 'statics/font/iconfont.css';
... ... @@ -24,6 +25,7 @@ if (window.__INITIAL_STATE__) {
store.replaceState(window.__INITIAL_STATE__);
}
window._router = get(store, 'state.yoho.context.route');
Vue.prop('yoho', yoho);
... ... @@ -44,6 +46,8 @@ Vue.prop('api', createApi(context, store));
Vue.use(Lazy, {error: ''});
InitClient(store);
const trackPage = (path) => {
if (window._hmt) {
try {
... ...
... ... @@ -27,16 +27,6 @@ const clientTitleMixin = {
if (title) {
document.title = title;
}
},
methods: {
auth() {
if (!this.$store.state.yoho.context.isLogin) {
this.$yoho.goLogin();
return false;
} else {
return true;
}
}
}
};
... ...
... ... @@ -6,7 +6,6 @@ import storeArticle from './article';
import storeUser from './user';
import storeComment from './comment';
import storeProduct from './product';
import plugin from './plugin';
Vue.use(Vuex);
... ... @@ -21,7 +20,6 @@ export function createStore(context) {
product: storeProduct()
},
strict: process.env.NODE_ENV !== 'production',
plugins: [plugin]
});
const api = createApi(context, store);
... ...
import Vue from 'vue';
export default (store) => {
setTimeout(() => {
if (process.env.VUE_ENV !== 'server') {
window.onresize = () => {
const {clientWidth, clientHeight} = document.body;
store.commit('SET_WINDOW_SIZE', {clientWidth, clientHeight});
};
const {clientWidth, clientHeight} = document.body;
store.commit('SET_WINDOW_SIZE', {clientWidth, clientHeight});
let supportsPassive = false;
try {
const opts = Object.defineProperty({}, 'passive', {
get() {
supportsPassive = true;
return true;
}
});
window.addEventListener('test', null, opts);
} catch (e) {} //eslint-disable-line
store.commit('SET_SUPPORT_PASSIVE', {supportsPassive});
Vue.$sdk.getUser().then(user => {
console.log(user)
})
}
}, 0);
export default () => {
};
... ...
... ... @@ -33,7 +33,9 @@ export default function() {
state.context.title = context.title;
state.context.route = context.route;
state.context.path = context.path;
state.context.isLogin = context.user.uid > 1;
},
[Types.SET_LOGIN_INFO](state, {uid}) {
state.context.isLogin = uid > 1;
},
[Types.SET_TITLE](state, {title}) {
state.context.title = title;
... ... @@ -55,8 +57,9 @@ export default function() {
[Types.SET_NEED_LOGIN](state, {needLogin}) {
state.context.needLogin = needLogin;
},
[Types.SET_WINDOW_SIZE](state, data) {
state.window = Object.assign(state.window, data);
[Types.SET_WINDOW_SIZE](state, {clientWidth, clientHeight}) {
state.window.clientWidth = clientWidth;
state.window.clientHeight = clientHeight;
},
[Types.SET_SUPPORT_PASSIVE](state, {supportsPassive}) {
state.window.supportsPassive = supportsPassive;
... ...
... ... @@ -3,5 +3,6 @@ export const SET_TITLE = 'SET_TITLE';
export const ROUTE_CHANGE = 'ROUTE_CHANGE';
export const REPORT_YAS = 'REPORT_YAS';
export const SET_NEED_LOGIN = 'SET_NEED_LOGIN';
export const SET_LOGIN_INFO = 'SET_LOGIN_INFO';
export const SET_WINDOW_SIZE = 'SET_WINDOW_SIZE';
export const SET_SUPPORT_PASSIVE = 'SET_SUPPORT_PASSIVE';
... ...
import Vue from 'vue';
export default store => {
window.onresize = () => {
const {clientWidth, clientHeight} = document.body;
store.commit('SET_WINDOW_SIZE', {clientWidth, clientHeight});
};
const {clientWidth, clientHeight} = document.body;
store.commit('SET_WINDOW_SIZE', {clientWidth, clientHeight});
let supportsPassive = false;
try {
const opts = Object.defineProperty({}, 'passive', {
get() {
supportsPassive = true;
return true;
}
});
window.addEventListener('test', null, opts);
} catch (e) {} //eslint-disable-line
store.commit('SET_SUPPORT_PASSIVE', {supportsPassive});
Vue.$sdk.getUser().then(user => {
if (user && user.uid) {
store.commit('SET_LOGIN_INFO', user);
}
});
};
... ...