You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
536 lines
14 KiB
536 lines
14 KiB
<template>
|
|
<view>
|
|
|
|
<view class="header">
|
|
<image class='background' src="/static/img/user/topbg.png" mode="aspectFill"></image>
|
|
<view class="userInfo">
|
|
<view class="uleft">
|
|
<u-image :src="userInfo.wxAvatar" width="60px" height="60px" radius="30px" @error="imgErr"></u-image>
|
|
</view>
|
|
<view class="ucenter">
|
|
<view class="name"><text class="username">{{userInfo.wxName}}</text><text class="level">{{identityinfo.levelTxt}}</text></view>
|
|
</view>
|
|
<view class="uright">
|
|
<view class="change" v-if="!this.$com.isNull(userInfo.phoneNumber)">
|
|
<u-button text="切换" openType="getPhoneNumber" @getphonenumber="getPhoneNumber"></u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="userItem">
|
|
<view class="uItemBox">
|
|
<view class="num">{{userInfo.totalAmount > 0 ? userInfo.totalAmount / 100 : '0.00'}}</view>
|
|
<view class="text">消费金额(元)</view>
|
|
</view>
|
|
<view class="uItemBox">
|
|
<view class="num">{{userInfo.totalDur > 0 ? userInfo.totalDur : 0}}</view>
|
|
<view class="text">使用时长(分)</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="orderBox">
|
|
<view class="orderBoxTitle">我的订单</view>
|
|
<view class="orderItem">
|
|
<view class="oItemBox" v-for="(item,key) in ordermenu" :key="key" @click="goTo(item.url)">
|
|
<view class="image">
|
|
<image :src="item.icon" mode="widthFix"></image>
|
|
</view>
|
|
<view class="order_text">{{item.label}}</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<view class="moneyBox" v-if="identityinfo.levelVal < 4">
|
|
<view class="moneyBoxTitle">收入抽成</view>
|
|
<view class="moneyBoxItem">
|
|
<view class="mItemBox">
|
|
<view class="money">
|
|
<text class="unit">￥</text><text class="num">{{userInfo.todayIncome > 0 ? userInfo.todayIncome / 100 :'0.00'}}</text>
|
|
</view>
|
|
<view class="order_text">今日收入</view>
|
|
</view>
|
|
<view class="mItemBox">
|
|
<view class="money">
|
|
<text class="unit">￥</text><text class="num">{{userInfo.totalIncome > 0 ? userInfo.totalIncome / 100 :'0.00'}}</text>
|
|
</view>
|
|
<view class="order_text">总收入</view>
|
|
</view>
|
|
|
|
<view class="mItemBox">
|
|
<view class="money">
|
|
<text class="unit">￥</text><text class="num">{{userInfo.todayLevelIncome > 0 ? userInfo.todayLevelIncome / 100 :'0.00'}}</text>
|
|
</view>
|
|
<view class="order_text">今日抽成</view>
|
|
</view>
|
|
<view class="mItemBox">
|
|
<view class="money">
|
|
<text class="unit">￥</text><text class="num">{{userInfo.totalLevelIncome > 0 ? userInfo.totalLevelIncome / 100 :'0.00'}}</text>
|
|
</view>
|
|
<view class="order_text">总抽成</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="serviceBox">
|
|
<view class="serviceBoxTitle">我的服务</view>
|
|
<view class="serviceItem">
|
|
<view class="sItemBox" v-for="(item,key) in shopmenu" :key="key" v-if="item.level >= identityinfo.levelVal" @click="goTo(item.url)">
|
|
<view class="image">
|
|
<image :src="item.icon" mode="widthFix"></image>
|
|
</view>
|
|
<view class="order_text">{{item.label}}</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
<view class="ad">
|
|
<image src="@/static/img/user/banner.jpg" mode="widthFix" @click="openVideo"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="serviceBox">
|
|
<view class="serviceBoxTitle">我的工具</view>
|
|
<view class="serviceItem">
|
|
<view class="sItemBox" v-for="(item,key) in setmenu" :key="key" @click="tools(item)">
|
|
<view class="image">
|
|
<image :src="item.icon" mode="widthFix"></image>
|
|
</view>
|
|
<view class="order_text">{{item.label}}</view>
|
|
</view>
|
|
|
|
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<view class="nowENV" v-if="this.$api.env() == 'development' || this.$api.env() == 'local'">
|
|
<u-tag v-if="this.$api.env() == 'development'" text="线上测试环境" type="warning" plain plainFill></u-tag>
|
|
<u-tag v-if="this.$api.env() == 'local'" text="本地开发环境" type="error" plain plainFill></u-tag>
|
|
</view>
|
|
|
|
<view class="empty">
|
|
</view>
|
|
|
|
|
|
<u-popup :show="video_show" :round="10" mode="center" :closeable="true" customStyle="{width:750rpx,height:auto}" @close="closeVideo">
|
|
<view class="videoBox">
|
|
<video id="myVideo" :src="video_src" @error="videoErrorCallback" :autoplay="false" controls></video>
|
|
</view>
|
|
</u-popup>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
isLogin:false, //登录
|
|
userInfo:{
|
|
wxAvatar:'/static/img/user/avatar.png',
|
|
wxName:'点击登录',
|
|
totalAmount:0.00,
|
|
totalDur:0,
|
|
},
|
|
isShop:false, //店铺
|
|
ordermenu: [
|
|
{ label: '全部', icon: '/static/img/user/order_all.png', url: '/pages/order/list?tab=0'},
|
|
{ label: '进行中', icon: '/static/img/user/order_ing.png', url: '/pages/order/list?tab=1'},
|
|
{ label: '已完成', icon: '/static/img/user/order_finish.png', url: '/pages/order/list?tab=2'},
|
|
],
|
|
shopmenu: [
|
|
{ label: '店铺管理', icon: '/static/img/order/store.png', url: '/pages/user/shop/shopmanage', level: 3},
|
|
{ label: '收入记录', icon: '/static/img/user/money_log.png', url: '/pages/user/mine/income', level: 3},
|
|
{ label: '提现申请', icon: '/static/img/user/withdraw.png', url: '/pages/user/mine/withdraw', level: 3},
|
|
{ label: '我的下级', icon: '/static/img/user/link.png', url: '/pages/user/mine/leveluser', level: 2},
|
|
{ label: '查看码值', icon: '/static/img/user/code.png', url: '/pages/user/shop/lookcode', level: 3},
|
|
{ label: '提现记录', icon: '/static/img/user/withdraw_log.png', url: '/pages/user/mine/withdrawrecord', level: 3},
|
|
|
|
],
|
|
setmenu: [
|
|
{ label: '账户设置', icon: '/static/img/user/account.png', type: 'normal',url: '/pages/user/account/index'},
|
|
{ label: '联系客服', icon: '/static/img/user/chat.png', type: 'service',url:''},
|
|
{ label: '代理入驻', icon: '/static/img/user/settled.png', type: 'normal',url: '/pages/user/mine/settled'}
|
|
],
|
|
//等级
|
|
identityinfo:'',
|
|
|
|
//视频显示
|
|
video_show:false,
|
|
video_src:'https://kjc.oss-cn-shenzhen.aliyuncs.com/video/demo.mp4',
|
|
|
|
};
|
|
},
|
|
onReady: function (res) {
|
|
this.videoContext = uni.createVideoContext('myVideo')
|
|
},
|
|
onShow() {
|
|
var _this =this;
|
|
var openid = _this.$user.session('openid');
|
|
if(!_this.$com.isNull(openid))
|
|
{
|
|
_this.isLogin = true;
|
|
_this.getUserInfo();
|
|
}
|
|
|
|
|
|
},
|
|
onShareAppMessage() {
|
|
return {
|
|
title: '空间充-我的',
|
|
path: uni.$u.page(),
|
|
}
|
|
},
|
|
onShareTimeline() {
|
|
return {
|
|
title: '空间充-我的',
|
|
path: uni.$u.page(),
|
|
}
|
|
},
|
|
methods:{
|
|
//头像加载失败
|
|
imgErr(){
|
|
this.userInfo.wxAvatar = '/static/img/user/avatar.png';
|
|
},
|
|
//获取用户信息
|
|
getUserInfo()
|
|
{
|
|
var _this =this;
|
|
var post ={};
|
|
_this.$api.post('ycl/user/wx-info',post,function(rs){
|
|
console.log(rs);
|
|
_this.userInfo = rs;
|
|
_this.$user.session('lifeData',rs);
|
|
var identityinfo = _this.$access.checkidentity(rs);
|
|
console.log(identityinfo);
|
|
_this.identityinfo = identityinfo;
|
|
_this.$user.session('identityinfo',identityinfo);
|
|
if(identityinfo.levelVal != 4)
|
|
{
|
|
var setmenu = _this.setmenu;
|
|
var updatedSetmenu = setmenu.filter(item => item.label !== '代理入驻');
|
|
_this.setmenu = updatedSetmenu;
|
|
}
|
|
|
|
},function(err){
|
|
console.log(err);
|
|
});
|
|
},
|
|
goTo(url)
|
|
{
|
|
uni.$u.route({
|
|
type:'navigateTo',
|
|
url: url,
|
|
});
|
|
},
|
|
tools(item)
|
|
{
|
|
var _this =this;
|
|
if(item.type == 'service')
|
|
{
|
|
var phone = _this.$user.session('servicePhone');
|
|
uni.makePhoneCall({
|
|
phoneNumber: phone,
|
|
success(res) {
|
|
console.log(res);
|
|
},
|
|
fail(err) {
|
|
console.log(err);
|
|
},
|
|
});
|
|
}
|
|
else
|
|
{
|
|
uni.$u.route({
|
|
type:'navigateTo',
|
|
url: item.url,
|
|
});
|
|
}
|
|
|
|
},
|
|
//打开视频
|
|
openVideo(){
|
|
var _this =this;
|
|
_this.video_show = true;
|
|
},
|
|
videoErrorCallback(e)
|
|
{
|
|
console.log(e);
|
|
},
|
|
closeVideo(){
|
|
var _this =this;
|
|
_this.video_show = false;
|
|
_this.videoContext.pause = true;
|
|
},
|
|
|
|
getPhoneNumber(e){
|
|
var _this =this;
|
|
var detail = e.detail;
|
|
console.log(detail);
|
|
if (detail.errMsg === 'getPhoneNumber:ok') {
|
|
|
|
_this.getPhoneApi(detail);
|
|
} else {
|
|
_this.$com.alert('授权失败')
|
|
}
|
|
},
|
|
getPhoneApi(detail){
|
|
var _this = this;
|
|
var openid = _this.$user.session('openid');
|
|
var post ={
|
|
|
|
code: detail.code,
|
|
};
|
|
_this.$api.post('ycl/user/wx-phone',post,function(rs){
|
|
console.log(rs);
|
|
var phoneNumber = rs;
|
|
_this.userInfo.phoneNumber = phoneNumber;
|
|
if(_this.$com.isNull(openid))
|
|
{
|
|
_this.$com.alert('切换失败,请退出并重新进入小程序重试');
|
|
}
|
|
// #ifdef MP
|
|
//这里目前微信小程序和抖音功能基本一样
|
|
uni.getProvider({
|
|
service: 'oauth',
|
|
success: function (res) {
|
|
console.log(res.provider)
|
|
var provider = res.provider[0];
|
|
|
|
uni.login({
|
|
provider:provider,
|
|
scopes:'auth_base',
|
|
success: function (login) {
|
|
console.log(login);
|
|
//发起网络请求
|
|
var xpost = {
|
|
loginCode: login.code,
|
|
phoneNumber:phoneNumber,
|
|
};
|
|
_this.$api.post('ycl/user/wx-login', xpost,function(resx){
|
|
console.log(resx);
|
|
_this.$user.session('openid',resx.wxOpenid);
|
|
_this.$user.session('user_id',resx.id);
|
|
if(!_this.$com.isNull(resx.token))
|
|
{
|
|
_this.$user.session('token',resx.token);
|
|
}
|
|
_this.isLogin = true;
|
|
_this.getUserInfo();
|
|
});
|
|
},
|
|
fail:function(rs){
|
|
console.log('登录失败'+rs.errMsg);
|
|
}
|
|
});
|
|
|
|
|
|
|
|
|
|
}
|
|
});
|
|
|
|
|
|
// #endif
|
|
},function(err){
|
|
console.log(err);
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page{ height:100%; width: 100%;}
|
|
.container{padding:10rpx 20rpx;}
|
|
.header{ width: 100%; height: 500rpx; overflow: hidden; position: relative;}
|
|
.background {
|
|
width: 100%;
|
|
height: 100%;
|
|
position:absolute;
|
|
background-size:100% 100%;
|
|
z-index: -1;
|
|
}
|
|
.userInfo{ width: 670rpx; height: auto; display: flex; margin: 100rpx auto 50rpx auto;}
|
|
.userInfo .uleft{ width: 120rpx; height: 120rpx;}
|
|
|
|
.userInfo .ucenter{ width: 430rpx; height: 120rpx; line-height: 120rpx;}
|
|
.userInfo .ucenter .name{ width: 100%; height: 120rpx;}
|
|
.userInfo .ucenter .name .username{font-size: 36rpx; color:#FFFFFF; margin-left:20rpx;}
|
|
.userInfo .ucenter .name .level{width: auto; padding: 2rpx 10rpx;
|
|
height: 44rpx;
|
|
background: #095E59; text-align: center; font-size: 24rpx;color: #FFFFFF;
|
|
border-radius: 42rpx 42rpx 42rpx 42rpx;
|
|
border: 1rpx solid #00F0E2; margin-left: 20rpx;}
|
|
.userInfo .uright{ width: 120rpx; height: 120rpx;}
|
|
.userInfo .uright .change{width: 104rpx;
|
|
height: 50rpx;
|
|
background: #00F0E2;
|
|
border-radius: 42rpx 42rpx 42rpx 42rpx; color: #1E2629; font-size: 28rpx; line-height: 50rpx; text-align: center;}
|
|
::v-deep .change .u-button{display: block !important; padding:0rpx !important; background-color: inherit !important; height:auto !important; border: none !important; border-radius: 42rpx !important;}
|
|
.userItem{
|
|
color: #FFFFFF;
|
|
width: 100%;
|
|
height: auto;
|
|
display: flex;
|
|
}
|
|
.uItemBox{ width:50%; text-align: center;}
|
|
.uItemBox .num{
|
|
font-size: 40rpx;
|
|
font-family: DIN, DIN;
|
|
font-weight: bold;
|
|
}
|
|
.uItemBox .text{
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
line-height: 28rpx;
|
|
}
|
|
|
|
/*订单部分*/
|
|
|
|
.orderBox{
|
|
width: 670rpx;
|
|
height: auto;
|
|
background: #082436;
|
|
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
opacity: 1;
|
|
margin: 0rpx auto;
|
|
padding: 20rpx;
|
|
}
|
|
.orderBoxTitle{
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color:#FFFFFF;
|
|
line-height: 60rpx;
|
|
}
|
|
|
|
.orderItem{
|
|
width: 100%; height: auto;
|
|
display: flex;
|
|
text-align: center;
|
|
}
|
|
.oItemBox{
|
|
width: 33.33%;
|
|
|
|
}
|
|
.oItemBox .image{ width: 100%; text-align: center; margin-top: 20rpx;}
|
|
.oItemBox .image image{width: 64rpx; height: auto; margin: 0rpx auto; }
|
|
.oItemBox .order_text{
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
line-height: 30rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
|
|
/*收入部分*/
|
|
|
|
.moneyBox{
|
|
width: 670rpx;
|
|
height: auto;
|
|
background: #082436;
|
|
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
opacity: 1;
|
|
margin: 20rpx auto;
|
|
padding: 20rpx;
|
|
}
|
|
.moneyBoxTitle{
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color:#FFFFFF;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.moneyBoxItem{
|
|
margin-top: 20rpx;
|
|
width: 100%; height: auto;
|
|
display: flex;
|
|
text-align: center;
|
|
gap:20rpx;
|
|
}
|
|
.mItemBox{
|
|
width: 152rpx;
|
|
height: 128rpx;
|
|
background: linear-gradient(180deg, rgba(49,156,255,0) 0%, rgba(0,255,240,0.5) 100%);
|
|
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
|
opacity: 1;
|
|
border: 1rpx solid #00F0E2;
|
|
|
|
|
|
}
|
|
.mItemBox .money{ width: 100%; text-align: center; color: #FFFFFF; line-height: 80rpx;}
|
|
.mItemBox .money .unit{ font-size: 24rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: bold;}
|
|
.mItemBox .money .num{ font-size: 30rpx;
|
|
font-family: DIN, DIN;
|
|
font-weight: 400;
|
|
}
|
|
.mItemBox .order_text{
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
line-height: 30rpx;
|
|
color: #FFECAA;
|
|
}
|
|
|
|
|
|
|
|
|
|
/*服务*/
|
|
|
|
.serviceBox{
|
|
width: 670rpx;
|
|
height: auto;
|
|
background: #082436;
|
|
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
opacity: 1;
|
|
margin: 20rpx auto;
|
|
padding: 20rpx;
|
|
}
|
|
.serviceBoxTitle{
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color:#FFFFFF;
|
|
line-height: 60rpx;
|
|
}
|
|
|
|
.serviceItem{
|
|
width: 100%; height: auto;
|
|
display: flex;
|
|
text-align: center;
|
|
flex-wrap:wrap;
|
|
}
|
|
.sItemBox{
|
|
width: 25%;
|
|
|
|
}
|
|
.sItemBox .image{ width: 100%; text-align: center; margin-top: 20rpx;}
|
|
.sItemBox .image image{width: 48rpx; height: auto; margin: 0rpx auto; }
|
|
.sItemBox .order_text{
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
line-height: 30rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
.nowENV{ width: 200rpx; height: 60rpx; margin: 10rpx auto; text-align: center;}
|
|
.empty{width: 100%; height: 20rpx;}
|
|
|
|
|
|
.ad{ width: 100%; height: auto; text-align: center; margin:0rpx auto;}
|
|
.ad image{ width:100%; margin-top:20rpx;border-radius: 30rpx;}
|
|
.videoBox{ width: 750rpx; height: 900rpx;}
|
|
.videoBox video{ width: 100%; height: 100%;}
|
|
|
|
</style>
|
|
|