fe / xianyu-ufo-app-web · Commits

Go to a project

Authored by Tao
Commit ce4acc3b3e5fe7ec807daf8f4cbb2b0e6a642a66 1 parent fccd63b0

频道页

Inline Side-by-side
Showing 5 changed files with 373 additions and 5 deletions
<template>
<!-- <LayoutApp :show-back="true">
<div class="body" ref="body">
<List></List>
</div>
<Footer class="footer"></Footer>
</LayoutApp> -->
<div>wdwqdwqdwq </div>
</template>
<script>
import Footer from './components/footer';
import List from './components/list';
export default {
components: {
Footer,
List
}
};
</script>
<style lang="scss" scoped>
.footer {
position: absolute;
bottom: 0;
width: 100%;
z-index: 100;
}
.body {
height: 100%;
overflow-y: auto;
}
</style>
... ...
<template>
<div class="banner">
<img :src="resource" alt="">
<div class="link" @click="onClick"></div>
</div>
</template>
<script>
import {createNamespacedHelpers} from 'vuex';
const {mapState} = createNamespacedHelpers('gain');
export default {
computed: {
...mapState(['resource'])
},
methods: {
onClick() {
this.$yoho.goNewPage({
url: 'https://activity.yoho.cn/feature/5729.html?title=活动规则&openby:yohobuy={"action":"go.h5","params":{"title":"活动规则","url":"https://activity.yoho.cn/feature/5729.html"}}'
});
}
}
};
</script>
<style lang="scss" scoped>
.banner {
font-size: 0;
padding-bottom: 20px;
background-color: #f0f0f0;
img {
position: relative;
width: 100%;
}
.link {
position: absolute;
width: 200px;
height: 200px;
top: 0;
right: 0;
}
}
</style>
... ...
<template>
<div>
<div ref='copy' class="btn" @click="onClick">
立即邀请
</div>
</div>
</template>
<script>
import {createNamespacedHelpers} from 'vuex';
import { get } from 'lodash';
import Clipboard from 'clipboard';
const {mapActions} = createNamespacedHelpers('gain');
export default {
name: 'GainFooter',
data() {
return {
isUnionType: false,
shareUrl: 'https://activity.yoho.cn/feature/5475.html?share_id=8169&title=新人礼遇'
};
},
mounted() {
let vm = this;
this.copyBtn = new Clipboard(this.$refs.copy, {
text() {
return vm.shareUrl + `&union_type=${vm.isUnionType}`;
}
});
this.copyBtn.on('success', function() {
if (vm.isUnionType) {
vm.$createToast({
txt: '邀请链接已复制，快去粘贴吧~',
type: 'txt'
}).show();
}
});
this.copyBtn.on('error', function() {
});
this.fetchUnionStatus().then(result => {
this.isUnionType = get(result, 'data.unionType', false);
});
},
methods: {
...mapActions(['fetchUnionStatus']),
async onClick() {
let vm = this;
const user = await this.$sdk.getUser();
if (!user.uid) {
this.$sdk.goLogin();
return;
}
if (!vm.isUnionType) {
this.$yoho.goNewPage({
url: 'http://m.yohobuy.com/activity/have-gain/apply?title=有货有赚介绍&openby:yohobuy={"action":"go.h5","params":{"title":"有货有赚介绍","url":"http://m.yohobuy.com/activity/have-gain/apply"}}'
});
return;
}
},
}
};
</script>
<style lang="scss" scoped>
.btn {
font-size: 32px;
width: 100%;
height: 98px;
line-height: 98px;
color: white;
text-align: center;
background: #444;
}
</style>
... ...
<template>
<div class="list-wrapper">
<div class="header-wrapper header-padding" v-if="fixed">
<div class="header">
<div style="width: 25%; text-align: left;">我邀请的好友</div>
<div class="register-time">注册时间</div>
<div style="width: 20%; text-align: right;">我的佣金</div>
</div>
</div>
<Scroll ref="scroll" class="list" :options="scrollOptions" :scrollEvents="['scroll']" :data="list"
@scroll="scroll"
@pulling-up="onPullingUp">
<Banner ref="banner"></Banner>
<div class="list-comp" ref="header">
<div class="title">邀请记录</div>
<div class="header-wrapper">
<div class="header">
<div style="width: 25%; text-align: left;">我邀请的好友</div>
<div class="register-time">注册时间</div>
<div style="width: 20%; text-align: right;">我的佣金</div>
</div>
</div>
</div>
<template v-if="list.length">
<div class="item" v-for="item in list">
<div class="name"
style="width: 25%; text-align: center; text-overflow:ellipsis; overflow: hidden; white-space: nowrap;">
{{item.nickname}}
</div>
<div class="register-time">{{item.dateStr}}</div>
<div class="amount" style="width: 20%; text-align: center;">{{item.amountStr}}</div>
</div>
</template>
<div class="empty" v-else>
快去邀请好友吧！
</div>
<div class="footer">
</div>
</Scroll>
</div>
</template>
<script>
import { Scroll } from 'cube-ui';
import Banner from './banner';
import { createNamespacedHelpers } from 'vuex';
const { mapState, mapActions } = createNamespacedHelpers('gain');
export default {
data() {
return {
scrollOptions: {
bounce: {
top: false
},
pullUpLoad: true
},
fixed: false
};
},
mounted() {
this.fetchList();
this.fetchResource().then(() => {
this.$nextTick(() => {
this.$refs.scroll.$forceUpdate();
});
});
},
methods: {
...mapActions(['fetchList', 'fetchResource']),
async onPullingUp() {
const result = await this.fetchList();
if (!result) {
this.$refs.scroll.$forceUpdate();
}
},
scroll({ y }) {
const height = this.$refs.banner.$el.offsetHeight + this.$refs.header.offsetHeight;
if (-y >= height) {
this.fixed = true;
} else {
this.fixed = false;
}
}
},
computed: {
...mapState(['list']),
},
components: {
Scroll,
Banner
}
};
</script>
<style lang="scss" scoped>
.list-comp {
padding: 40px 30px 0 30px;
}
.header-padding {
margin: 0 30px 0 30px;
z-index: 100;
background-color: white;
width: calc(100% - 60px);
}
.list-wrapper {
height: 100%;
}
.list-comp {
height: 100%;
}
.title {
font-size: 34px;
color: #222;
text-align: center;
font-weight: bold;
margin-bottom: 20px;
}
.header-wrapper {
position: relative;
height: 100px;
}
.header {
display: flex;
font-size: 28px;
color: #b0b0b0;
justify-content: space-between;
height: 100px;
line-height: 100px;
.fixed {
position: absolute;
}
}
.header:before {
content: " ";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
border-top: 1px solid #b0b0b0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.register-time {
position: absolute;
width: 100%;
text-align: center;
}
.list {
height: 100%;
}
.item {
height: 100px;
font-size: 28px;
color: #444;
display: flex;
border-bottom: 0.5PX solid #e0e0e0;
line-height: 100px;
position: relative;
justify-content: space-between;
margin: 0 30px 0 30px;
}
.empty {
width: 100%;
height: 150px;
font-size: 28px;
color: #b0b0b0;
line-height: 150px;
text-align: center;
}
.footer {
height: 98px;
width: 100%;
}
</style>
... ...
export default [{
// name: 'GainShow',
// path: '/xianyu/order/show.html',
// component: () => import(/* webpackChunkName: "gain" */ './order')
}];
export default [
{
name: 'channel',
path: '/xianyu/channel',
component: () => import('./channel/channel')
},
];
... ...