|
|
@@ -0,0 +1,500 @@
|
|
|
+<template>
|
|
|
+ <view class="content">
|
|
|
+ <view class="box-top">
|
|
|
+ <view class="bg3">
|
|
|
+ <image src="../../static/index/img14.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="bg3 two">
|
|
|
+ <image src="../../static/index/img08.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="top-tit">
|
|
|
+ 邀请好友
|
|
|
+ 变成壕友
|
|
|
+ </view>
|
|
|
+ <view class="center-wrap">
|
|
|
+ <image src="../../static/img/tj-bg.png" mode="" class="tj-bg"></image>
|
|
|
+ <view class="center-tit">
|
|
|
+ 邀请地址
|
|
|
+ </view>
|
|
|
+ <view class="tj-jl flex" @click="opneYj">
|
|
|
+ <text>业</text>
|
|
|
+ <text>绩</text>
|
|
|
+ </view>
|
|
|
+ <view class="tj-qr">
|
|
|
+ <tki-qrcode
|
|
|
+ :cid="cid"
|
|
|
+ ref="qrcode"
|
|
|
+ :val="val"
|
|
|
+ :size="size"
|
|
|
+ :unit="unit"
|
|
|
+ :background="background"
|
|
|
+ :foreground="foreground"
|
|
|
+ :pdground="pdground"
|
|
|
+ :iconSize="iconSize"
|
|
|
+ :lv="lv"
|
|
|
+ :onval="onval"
|
|
|
+ :loadMake="loadMake"
|
|
|
+ :usingComponents="usingComponents"
|
|
|
+ @result="qrR"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ <view class="tj-lj-tit">
|
|
|
+ 【链接地址】
|
|
|
+ </view>
|
|
|
+ <view class="tj-lj flex">
|
|
|
+ <view class="lj-tit">
|
|
|
+ 邀请链接：
|
|
|
+ </view>
|
|
|
+ <view class="lj-info clamp">
|
|
|
+ 山上有座庙，庙里有个老和尚和小和尚
|
|
|
+ </view>
|
|
|
+ <view class="lj-copy">
|
|
|
+ 复制链接
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="tj-look">
|
|
|
+ 查看推荐
|
|
|
+ </view>
|
|
|
+ <uni-popup ref="yeji" type="center">
|
|
|
+ <view class="yj-wrap">
|
|
|
+ <view class="yj-tit">
|
|
|
+ 收益明细
|
|
|
+ </view>
|
|
|
+ <image src="../../static/img/yj-bg.png" mode="" class="yj-logo"></image>
|
|
|
+ <view class="yj-hj flex">
|
|
|
+ <view class="yj-hj-item">
|
|
|
+ <view class="hj-item-val">
|
|
|
+ 0
|
|
|
+ </view>
|
|
|
+ <view class="hj-item-name">
|
|
|
+ KGC总业绩
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="yj-hj-item">
|
|
|
+ <view class="hj-item-val">
|
|
|
+ 0
|
|
|
+ </view>
|
|
|
+ <view class="hj-item-name">
|
|
|
+ FL总业绩
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="yj-nav flex">
|
|
|
+ <view class="nav-item" v-for="(navitem,index) in navList" :class="{'active': index == tabIndex}" @click="navClick(index)">
|
|
|
+ {{navitem.name}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="yj-info-wrap">
|
|
|
+ <view class="yj-info-tit flex">
|
|
|
+ <view class="">
|
|
|
+ 时间
|
|
|
+ </view>
|
|
|
+ <view class="">
|
|
|
+ 金额(KGC)
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <swiper class="yj-info-scroll" :current="tabIndex" duration="300">
|
|
|
+ <swiper-item v-for="item in navList">
|
|
|
+ <scroll-view scroll-y="true" class="yj-info-scroll" @scrolltolower="loadMore">
|
|
|
+ <view v-for="itemt in item.list" class="">
|
|
|
+ <view class="flex yj-info">
|
|
|
+ <view class="">
|
|
|
+ {{itemt.time}}
|
|
|
+ </view>
|
|
|
+ <view class="">
|
|
|
+ {{itemt.val}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <uni-load-more :status="item.loadingType"></uni-load-more>
|
|
|
+ </scroll-view>
|
|
|
+ </swiper-item>
|
|
|
+
|
|
|
+ </swiper>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ cid: 'tki-qrcode-canvas', //canvasId，页面存在多个二维码组件时需设置不同的ID
|
|
|
+ size: 378, //生成的二维码大小
|
|
|
+ unit: 'upx', //大小单位尺寸
|
|
|
+ show: true,//默认使用组件中的image标签显示二维码
|
|
|
+ val: '强儿、岚儿都是我儿', //要生成的内容
|
|
|
+ background: '#ffffff', //二维码背景色
|
|
|
+ foreground: '#333333', //二维码前景色
|
|
|
+ pdground: '#333333', //二维码角标色
|
|
|
+ icon: '', //二维码图标URL（必须是本地图片，网络图需要先下载至本地）
|
|
|
+ iconSize: 40, //二维码图标大小
|
|
|
+ lv: 3, //容错级别
|
|
|
+ onval: true, //监听val值变化自动重新生成二维码
|
|
|
+ loadMake: true, //组件初始化完成后自动生成二维码，val需要有值
|
|
|
+ usingComponents: false, //是否使用了自定义组件模式（主要是为了修复非自定义组件模式时 v-if 无法生成二维码的问题）
|
|
|
+ showLoading: false, //是否显示loading
|
|
|
+ loadingText: '二维码生成中', //loading文字
|
|
|
+ src: '', // 二维码生成后的图片地址或base64
|
|
|
+ ratio: 1, //页面比例用于计算
|
|
|
+ ctxSrc: '', //要显示的图片
|
|
|
+ loading: true,//是否载入图片中
|
|
|
+ canHeight: '',//画布高度
|
|
|
+ canWeidth: '',//画布宽度
|
|
|
+ navList: [
|
|
|
+ {
|
|
|
+ name: '直推业绩',
|
|
|
+ page: 1,
|
|
|
+ limit: 8,
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ time: 2020-1-10,
|
|
|
+ val: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: 2020-1-10,
|
|
|
+ val: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: 2020-1-10,
|
|
|
+ val: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: 2020-1-10,
|
|
|
+ val: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: 2020-1-10,
|
|
|
+ val: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: 2020-1-10,
|
|
|
+ val: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: 2020-1-10,
|
|
|
+ val: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: 2020-1-10,
|
|
|
+ val: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: 2020-1-10,
|
|
|
+ val: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: 2020-1-10,
|
|
|
+ val: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: 2020-1-10,
|
|
|
+ val: 100
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ loaded: false,
|
|
|
+ loadingType: 'more'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '间推业绩',
|
|
|
+ page: 1,
|
|
|
+ limit: 8,
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ time: 2020-1-10,
|
|
|
+ val: 200
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: 2020-1-10,
|
|
|
+ val: 200
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: 2020-1-10,
|
|
|
+ val: 200
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ loaded: false,
|
|
|
+ loadingType: 'more'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ tabIndex: 0,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ qrR() {
|
|
|
+
|
|
|
+ },
|
|
|
+ opneYj() {
|
|
|
+ this.$refs.yeji.open()
|
|
|
+ },
|
|
|
+ // 点击切换
|
|
|
+ navClick(index) {
|
|
|
+ this.tabIndex = index
|
|
|
+ },
|
|
|
+ // 下滑到底加载更多
|
|
|
+ loadMore() {
|
|
|
+ let obj = this
|
|
|
+ let index = obj.tabIndex
|
|
|
+ let navItem = obj.navList[index]
|
|
|
+ if(navItem.loadingType == 'noMore' || navItem.loadingType == 'loading') {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ navItem.loadingType = 'loading'
|
|
|
+ console.log('jiaz')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ page {
|
|
|
+ background-color: #00050f;
|
|
|
+ }
|
|
|
+ .top-tit {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 160rpx;
|
|
|
+ font-family: zihun164hao-fangyuehei;
|
|
|
+ font-weight: 400;
|
|
|
+ font-style: italic;
|
|
|
+ color: #08EDE7;
|
|
|
+ line-height: 168rpx;
|
|
|
+ margin-bottom: 62rpx;
|
|
|
+ }
|
|
|
+ .box-top{
|
|
|
+ display: flex;
|
|
|
+ padding: 36rpx 41rpx 72rpx 41rpx;
|
|
|
+ .bg3{
|
|
|
+ width: 56rpx;
|
|
|
+ height: 62rpx;
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .two{
|
|
|
+ margin-left: 36rpx;
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .center-wrap {
|
|
|
+ width: 680rpx;
|
|
|
+ height: 891rpx;
|
|
|
+ margin: auto;
|
|
|
+ position: relative;
|
|
|
+ .tj-bg {
|
|
|
+ position: absolute;
|
|
|
+ width: 680rpx;
|
|
|
+ height: 891rpx;
|
|
|
+ }
|
|
|
+ .center-tit {
|
|
|
+ width: 680rpx;
|
|
|
+ height: 102rpx;
|
|
|
+ line-height: 102rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 44rpx;
|
|
|
+ font-family: zihun100hao-fangfangxianfengti;
|
|
|
+ font-weight: 900;
|
|
|
+ color: #08EDE7;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+ .tj-jl {
|
|
|
+ text-align: center;
|
|
|
+ width: 61rpx;
|
|
|
+ height: 110rpx;
|
|
|
+ background: #08EDE7;
|
|
|
+ border-radius: 10rpx 0px 0px 10rpx;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 170rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #001337;
|
|
|
+ // line-height: 40rpx;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .tj-qr {
|
|
|
+ width: 383rpx;
|
|
|
+ height: 383rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border: 5rpx solid #08EDE7;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ left: 0;
|
|
|
+ top: 204rpx;
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+ .tj-lj-tit {
|
|
|
+ width: 680rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 31rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 103px;
|
|
|
+ position: absolute;
|
|
|
+ top: 550rpx;
|
|
|
+ }
|
|
|
+ .tj-lj {
|
|
|
+ width: 636rpx;
|
|
|
+ height: 67rpx;
|
|
|
+ background: #233B75;
|
|
|
+ border: 2rpx solid #08EDE7;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 124rpx;
|
|
|
+ right: 0;
|
|
|
+ left: 0;
|
|
|
+ margin: auto;
|
|
|
+ .lj-tit {
|
|
|
+ width: 148rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ text-align: right;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 67rpx;
|
|
|
+ }
|
|
|
+ .lj-info {
|
|
|
+ width: 148rpx;
|
|
|
+ flex-grow: 1;
|
|
|
+ text-align: right;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 67rpx;
|
|
|
+ }
|
|
|
+ .lj-copy {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 148rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #08EDE7;
|
|
|
+ line-height: 67rpx;
|
|
|
+ // opacity: 0.75;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tj-look {
|
|
|
+ width: 450rpx;
|
|
|
+ height: 75rpx;
|
|
|
+ background: linear-gradient(0deg, #FF7206, #FFDD7E);
|
|
|
+ box-shadow: 0px 2rpx 8rpx 0px rgba(207, 126, 57, 0.7);
|
|
|
+ border-radius: 38rpx;
|
|
|
+ margin: 55rpx auto 0;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-family: zihun164hao-fangyuehei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 75rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .yj-wrap {
|
|
|
+ width: 680rpx;
|
|
|
+ height: 854rpx;
|
|
|
+ background: linear-gradient(180deg, #254FAB 0%, #230A8E 100%);
|
|
|
+ border-radius: 20rpx;
|
|
|
+ .yj-logo {
|
|
|
+ display: block;
|
|
|
+ width: 326rpx;
|
|
|
+ height: 16rpx;
|
|
|
+ margin: auto;
|
|
|
+ border-radius: 20px;
|
|
|
+ }
|
|
|
+ .yj-tit {
|
|
|
+ width: 100%;
|
|
|
+ padding-top: 60rpx;
|
|
|
+ padding-bottom: 15rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 46rpx;
|
|
|
+ font-family: zihun100hao-fangfangxianfengti;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FFFFFF;
|
|
|
+ // line-height: 38px;
|
|
|
+ }
|
|
|
+ .yj-hj {
|
|
|
+ width: 653rpx;
|
|
|
+ height: 147rpx;
|
|
|
+ background: #233B75;
|
|
|
+ border: 2rpx solid #08EDE7;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin: 40rpx auto;
|
|
|
+ .yj-hj-item {
|
|
|
+ width: 50%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 38rpx;
|
|
|
+ // opacity: 0.7;
|
|
|
+ .hj-item-val {
|
|
|
+ font-size: 41rpx;
|
|
|
+ padding-bottom: 10rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #08EDE7;
|
|
|
+ line-height: 38rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .yj-nav {
|
|
|
+ width: 582rpx;
|
|
|
+ border-bottom: 2rpx solid #fff;
|
|
|
+ margin: auto;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #97a1d2;
|
|
|
+ line-height: 38rpx;
|
|
|
+ .nav-item {
|
|
|
+ padding: 20rpx 40rpx;
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .yj-info-wrap {
|
|
|
+ height: 362rpx;
|
|
|
+ width: 582rpx;
|
|
|
+ margin: auto;
|
|
|
+ // background-color: #fff;
|
|
|
+ .yj-info-tit {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 38rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 10rpx 0;
|
|
|
+ }
|
|
|
+ .yj-info-scroll {
|
|
|
+ // touch-action: none;
|
|
|
+ width: 582rpx;
|
|
|
+ height: 320rpx;
|
|
|
+ // background-color: red;
|
|
|
+ .yj-info {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 38rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
