540 lines
10 KiB
Vue
540 lines
10 KiB
Vue
<template>
|
|
<view class="page-wrap">
|
|
|
|
<view class="top-bg">
|
|
<image :src="z_imgPath + 'tuiguang-bg.png'" />
|
|
</view>
|
|
<view class="gzbox" @click="$refs.shuoming.open()">
|
|
<image :src="z_imgPath+'yqgz.png'"></image>
|
|
</view>
|
|
|
|
<uni-popup ref="shuoming" type="center">
|
|
<view class="pop" :style="'background: url('+ z_imgPath + 'gz_bg.png'+ ') no-repeat 0 0 / 100% 100%;'">
|
|
<view class="pop_con">
|
|
<scroll-view scroll-y="true" style="height: 440rpx;">
|
|
<view v-html="news"></view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
|
|
<view class="card">
|
|
<view class="people-money">
|
|
<view class="people">
|
|
<image :src="z_imgPath+'yyq.png'" style="height:27rpx;width: 109rpx;"></image>
|
|
<view class="num"> {{ total }} <text>人</text> </view>
|
|
</view>
|
|
<view class="line"></view>
|
|
<view class="moneys">
|
|
<view class="content" @click="gotoPage('/pages/user/sy_jl')">
|
|
<image :src="z_imgPath+'jl.png'" style="height:27rpx;width: 145rpx;"></image>
|
|
<view class="money"> {{ commission }} <text>元</text> </view>
|
|
</view>
|
|
<view class="icon">
|
|
<image :src="z_imgPath+'point_right.png'" mode="scaleToFill" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<button open-type="share" class="invite-btn">
|
|
<image :src="z_imgPath+'invite-btn.png'" />
|
|
<!-- 去邀请好友 -->
|
|
</button>
|
|
|
|
</view>
|
|
|
|
<view class="card two">
|
|
|
|
<image :src="z_imgPath + 'yqjl.png'" class="title-img" style="height: 33rpx;width: 156rpx;"></image>
|
|
<view class="list-wrap" :style="{height: upOption.isLock == false ? 'auto' : '510rpx' }">
|
|
<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="getList"
|
|
:down="downOption" :up="upOption">
|
|
<view v-for="(item, i) of listData" :key="i" class="list-wrap-item">
|
|
<view class="content">
|
|
<view class="avatar">
|
|
<image :src="item.headimg" mode="scaleToFill" />
|
|
</view>
|
|
<view class="info">
|
|
<view class="info-hd">
|
|
<text style="color: #fff;">{{ item.nickname }}</text>
|
|
<text class="title">累计消费</text>
|
|
</view>
|
|
<view class="info-bd">
|
|
<text>{{ item.addtime }}</text>
|
|
<text class="money">¥{{ item.commission_money }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="invite-name">
|
|
<!-- 邀请人：
|
|
<text>{{ item.parent_name }}</text> -->
|
|
</view>
|
|
</view>
|
|
</mescroll-body>
|
|
</view>
|
|
<view v-if="upOption.isLock" class="show-more">
|
|
<view v-if="listData.length > 3" @click="openUpPage" class="btn">
|
|
<view>查看更多</view>
|
|
<view class="icon">
|
|
<image :src=" z_imgPath + 'arrow-right-circle.png' " style="position: relative;bottom: 6rpx;"
|
|
mode="scaleToFill" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- <blank :height="30"></blank> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
z_imgPath: this.$z_img + 'mine/yaoqing/',
|
|
downOption: {
|
|
use: false,
|
|
auto: false
|
|
},
|
|
upOption: {
|
|
isLock: true,
|
|
auto: true,
|
|
page: {
|
|
size: 10 // 每页数据的数量,默认10
|
|
}
|
|
},
|
|
tabList: [{
|
|
name: '直推',
|
|
id: 1
|
|
},
|
|
{
|
|
name: '荐推',
|
|
id: 2
|
|
}
|
|
],
|
|
tabCur: 0,
|
|
pop_show: false,
|
|
userInfo: '',
|
|
listData: '',
|
|
news: '',
|
|
total: 0,
|
|
logo_image: '',
|
|
commission: 0,
|
|
pid: ''
|
|
}
|
|
},
|
|
onShareAppMessage() {
|
|
let that = this;
|
|
return {
|
|
title: "友达赏，正版潮玩手办一番赏",
|
|
imageUrl: that.logo_image,
|
|
path: "/pages/shouye/index?pid=" + uni.getStorageSync('userinfo').ID
|
|
};
|
|
},
|
|
onLoad() {
|
|
console.log(uni.getStorageSync('userinfo').ID)
|
|
this.getDanye(9)
|
|
},
|
|
methods: {
|
|
getDanye(e) {
|
|
let that = this;
|
|
that.req({
|
|
url: 'danye',
|
|
data: {
|
|
type: e
|
|
},
|
|
success(res) {
|
|
if (res.status == 1) {
|
|
that.news = res.data
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
openUpPage() {
|
|
this.upOption.isLock = false
|
|
this.mescroll.lockUpScroll(false)
|
|
},
|
|
|
|
getList({
|
|
num,
|
|
size
|
|
}) {
|
|
var that = this;
|
|
this.req({
|
|
url: 'invitation',
|
|
data: {
|
|
page: num,
|
|
per_page: size,
|
|
depth: this.tabList[this.tabCur].id
|
|
},
|
|
success: res => {
|
|
that.total = res.data.count
|
|
that.commission = res.data.money
|
|
that.logo_image = res.data.share_image
|
|
if (num == 1) {
|
|
this.listData = []
|
|
}
|
|
this.mescroll.endBySize(res.data.data.length, res.data.last_page)
|
|
this.listData = [...this.listData, ...res.data.data]
|
|
},
|
|
fail: err => {
|
|
console.log('err', err)
|
|
// this.mescroll.endErr()
|
|
}
|
|
})
|
|
},
|
|
|
|
/**
|
|
* @description: tab栏切换
|
|
* @param {*}
|
|
* @return {*}
|
|
*/
|
|
tabChange(item, i) {
|
|
this.tabCur = i
|
|
this.mescroll.resetUpScroll()
|
|
// this.mescroll.scrollTo(0, 0)
|
|
},
|
|
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
button::after {
|
|
border: none;
|
|
}
|
|
|
|
button {
|
|
background-color: transparent;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
line-height: inherit;
|
|
border-radius: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.page-wrap {
|
|
background: #080808;
|
|
padding-bottom: 100rpx;
|
|
padding-top: 183rpx;
|
|
box-sizing: border-box;
|
|
|
|
/deep/.uni-navbar__content {
|
|
z-index: 998;
|
|
}
|
|
|
|
|
|
.top-bg {
|
|
width: 750rpx;
|
|
height: 790rpx;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
|
|
}
|
|
|
|
.card {
|
|
position: relative;
|
|
z-index: 1;
|
|
margin: 299rpx auto 0;
|
|
width: 712rpx;
|
|
// height: 540rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 20rpx;
|
|
// background: #fff;
|
|
padding: 10rpx 30rpx;
|
|
|
|
.title-img {
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.people-money {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
margin-top: 60rpx;
|
|
// padding: 40rpx 0;
|
|
border-radius: 10rpx;
|
|
// background: #000000;
|
|
color: #ffffff;
|
|
|
|
.people {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
align-items: center;
|
|
|
|
|
|
.num {
|
|
margin-top: 30rpx;
|
|
font-size: 36rpx;
|
|
font-weight: 400;
|
|
color: #F37400;
|
|
|
|
text {
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
margin-left: 6rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.line {
|
|
height: 122rpx;
|
|
width: 0;
|
|
border-left: 1px solid rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.moneys {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.content {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
align-items: center;
|
|
|
|
|
|
|
|
.money {
|
|
margin-top: 30rpx;
|
|
font-size: 36rpx;
|
|
color: #F37400;
|
|
|
|
text {
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
margin-left: 6rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
width: 20rpx;
|
|
height: 32rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.invite-btn {
|
|
width: 391rpx;
|
|
height: 74rpx;
|
|
margin: 10rpx auto 30rpx;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
line-height: 88rpx;
|
|
border: none;
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.two {
|
|
margin-top: 30rpx;
|
|
background: #151515;
|
|
padding-top: 35rpx;
|
|
|
|
.tab-wrap {
|
|
margin-top: 15rpx;
|
|
padding: 0 30rpx;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
background: #fff;
|
|
// width: 100%;
|
|
height: 88rpx;
|
|
position: relative;
|
|
|
|
.tab-item {
|
|
font-size: 28rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.bar {
|
|
width: 48rpx;
|
|
height: 4rpx;
|
|
background: #61e3ff;
|
|
border-radius: 2rpx;
|
|
position: absolute;
|
|
bottom: 15rpx;
|
|
opacity: 0;
|
|
}
|
|
|
|
&.active {
|
|
color: #222;
|
|
|
|
.bar {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.list-wrap {
|
|
height: auto;
|
|
overflow: hidden;
|
|
|
|
&-item {
|
|
height: 140rpx;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
justify-content: space-evenly;
|
|
box-sizing: border-box;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
|
|
|
.content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.avatar {
|
|
width: 86rpx;
|
|
height: 86rpx;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
background: #eee;
|
|
}
|
|
|
|
.info {
|
|
width: calc(100% - 110rpx);
|
|
|
|
&-hd {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
font-size: 32rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
|
|
.title {
|
|
font-size: 24rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
&-bd {
|
|
margin-top: 10rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
font-size: 24rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
|
|
.money {
|
|
color: #F37400;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.invite-name {
|
|
padding-left: 110rpx;
|
|
font-size: 24rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
|
|
text {
|
|
color: #ef2200;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.show-more {
|
|
height: 70rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.btn {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
font-size: 28rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
|
|
.icon {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.gzbox {
|
|
width: 90rpx;
|
|
height: 75rpx;
|
|
position: absolute;
|
|
top: 74rpx;
|
|
left: 40rpx;
|
|
}
|
|
|
|
.gzbox>image {
|
|
width: 100%;
|
|
height: 100%;
|
|
// margin-right: 9rpx;
|
|
// margin-left: 20rpx;
|
|
position: relative;
|
|
// top: 6rpx;
|
|
}
|
|
|
|
|
|
|
|
.pop_con {
|
|
height: 440rpx;
|
|
margin: auto;
|
|
padding: 0rpx 36rpx;
|
|
font-size: 24rpx;
|
|
line-height: 36rpx;
|
|
color: #FFFFFF;
|
|
box-sizing: border-box;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.pop_title {
|
|
// font-family: 'zcq';
|
|
font-size: 40rpx;
|
|
color: #96FFFE;
|
|
height: 128rpx;
|
|
line-height: 128rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.pop {
|
|
width: 543rpx;
|
|
height: 801rpx;
|
|
padding-top: 192rpx;
|
|
box-sizing: border-box;
|
|
/* background: #FFFFFF; */
|
|
/* border-radius: 20rpx; */
|
|
}
|
|
</style>
|