频道页

+<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')
+  },
+];