船员公众号
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.
gzh_chuanyuan/pages/user/index.vue

627 lines
14 KiB

2 months ago
<template>
<view class="user">
<u-navbar fixed title="我的" :placeholder="true" :titleStyle="{'color':'#fff'}" title-color="#fff" leftIcon=" "
:border="false" :bgColor="scrollTop?'#2080f9':'transparent'"></u-navbar>
<view class="user-hd">
<view class="a" @click="openPage(isLogin?8:14)">
<image :src="userInfo.avatar?userInfo.avatar:'/static/avater.png'"></image>
<view class="n" v-if="isLogin">{{userInfo.nickname||''}}</view>
<view class="n" v-else>登录</view>
<view class="vip" v-if="isLogin && userInfo.agent_name">{{userInfo.agent_name}}</view>
<view class="mobile" v-else>{{userInfo.mobile}}</view>
</view>
<view class="b" v-if="isLogin" @click="openPage(isLogin?8:14)">
<image :src="staticUrl('/static/icon-edit.png')"></image>编辑资料
</view>
</view>
<view class="user-money" @click="openPage(isLogin?9:14)">
<view class="a">
<image :src="staticUrl('/static/icon-money.png')"></image>
我的账户
</view>
<view class="b">
{{userInfo.balance|| 0}}
</view>
</view>
<view class="user-menu">
<view class="a" @click="openPage(isLogin?10:14)">
<image :src="staticUrl('/static/icon-user-01.png')"></image>
我的团队
</view>
<view class="a" @click="openPage(isLogin?11:14)">
<image :src="staticUrl('/static/icon-user-02.png')"></image>
我的佣金
</view>
2 months ago
<!-- #ifdef MP-WEIXIN -->
2 months ago
<view class="a" @click="openPage(isLogin?12:14)">
<image :src="staticUrl('/static/icon-user-03.png')"></image>
专属推广码
</view>
2 months ago
<!-- #endif -->
<!-- #ifdef H5 -->
<view class="a" @click="openPage(isLogin?16:14)">
<image :src="staticUrl('/static/icon-user-03.png')"></image>
专属推广码
</view>
<!-- #endif -->
2 months ago
</view>
<view class="user-bd">
<view class="item" @click="openPage(1)">
<view class="a">
<image :src="staticUrl('/static/icon-user-04.png')"></image>
试题购买
</view>
<view class="b">
<image :src="staticUrl('/static/icon-arrow.png')"></image>
</view>
</view>
<view class="item" @click="openPage(2)">
<view class="a">
<image :src="staticUrl('/static/icon-user-05.png')"></image>
视频
</view>
<view class="b">
<image :src="staticUrl('/static/icon-arrow.png')"></image>
</view>
</view>
</view>
<view class="user-bd">
2 months ago
<!-- #ifdef MP-WEIXIN -->
2 months ago
<view class="item" @click="openPage(3)">
<view class="a">
<image :src="staticUrl('/static/icon-user-06.png')"></image>
关注我们
</view>
<view class="b">
<image :src="staticUrl('/static/icon-arrow.png')"></image>
</view>
</view>
2 months ago
<!-- #endif -->
<!-- #ifdef H5 -->
<view class="item" @click="openPage(15)">
<view class="a">
<image :src="staticUrl('/static/icon-user-06.png')"></image>
关注我们
</view>
<view class="b">
<image :src="staticUrl('/static/icon-arrow.png')"></image>
</view>
</view>
<!-- #endif -->
2 months ago
<view class="item" @click="openPage(4)">
<view class="a">
<image :src="staticUrl('/static/icon-user-07.png')"></image>
联系我们
</view>
<view class="b">
{{configInfo.mobile}}
</view>
</view>
<view class="item" @click="openPage(6)">
<view class="a">
<image :src="staticUrl('/static/icon-user-09.png')"></image>
隐私协议
</view>
<view class="b">
<image :src="staticUrl('/static/icon-arrow.png')"></image>
</view>
</view>
<view class="item" @click="openPage(7)">
<view class="a">
<image :src="staticUrl('/static/icon-user-10.png')"></image>
关于我们
</view>
<view class="b">
<image :src="staticUrl('/static/icon-arrow.png')"></image>
</view>
</view>
</view>
<view class="user-fd" @click="openPage(13)" v-if="isLogin">
退出登录
</view>
<u-action-sheet :show="isShow" @close="isShow = false" cancelText="取消" :round="10">
<view class="user-action">
<view class="li">
<image :src="staticUrl('/static/user-share.png')"></image>
微信
<button open-type="share"></button>
</view>
<view class="li" @click="toTu()">
<image :src="staticUrl('/static/user-image.png')"></image>
生成图片
</view>
</view>
</u-action-sheet>
<u-popup :show="isPopup" round="10" @close="isPopup=false" mode="center" :closeable="true">
<view class="popup-qr">
<image :src="qr_code"></image>
2 months ago
<!-- #ifdef MP-WEIXIN -->
2 months ago
<u-button color="#2080F9" @click="download(qr_code)">保存相册</u-button>
2 months ago
<!-- #endif -->
<!-- #ifdef H5 -->
2 months ago
<u-button color="#2080F9" @click="download1(qr_code)">立即下载</u-button>
2 months ago
<!-- #endif -->
2 months ago
</view>
</u-popup>
</view>
</template>
<script>
export default {
data() {
return {
isShow1: false,
isLogin: false,
isShow: false,
statusBarHeight: 0,
scrollTop: 0,
isPopup: false,
userInfo: {},
configInfo: {},
qr_code: ""
}
},
onLoad() {
2 months ago
// #ifdef MP-WEIXIN
2 months ago
this.isShow = uni.getStorageSync("isShare")?true:false;
uni.removeStorageSync("isShare")
2 months ago
// #endif
2 months ago
},
onShow() {
if(uni.getStorageSync("userToken")){
this.getUserInfo();
this.isLogin = true;
}else{
this.userInfo = {}
this.isLogin = false;
}
this.getConfig();
this.getConfig1();
},
onShareAppMessage(res) {
if (res.from === 'button') { // 来自页面内分享按钮
console.log(res.target)
}
return {
title: '自定义分享标题',
path: '/pages/login/login?id='+this.userInfo.id||'',
imageUrl: this.userInfo.qr_code
}
},
destroyed() {
uni.removeStorageSync("isShare")
},
methods: {
//开关
async getConfig1() {
const { code, data, msg } = await this.$api.getConfigIndex({})
if (code == 200) {
this.isShow1 = data.is_open;
}
},
toTu() {
this.isPopup = true;
this.isShow = false;
this.qr_code = this.userInfo.qr_code;
uni.removeStorageSync("isShow")
},
2 months ago
download1(qr_code){
2 months ago
let a = document.createElement("a");
2 months ago
a.href = qr_code;
2 months ago
a.setAttribute("download", "mytag");
a.click();
},
2 months ago
openPage(index) {
const that = this;
if (index == 1) {
uni.navigateTo({
url: "/pages/question/buyOne"
})
} else if (index == 2) {
uni.navigateTo({
url: "/pages/user/videoList"
})
} else if (index == 3) {
this.qr_code = this.configInfo.qr_code_img;
this.isPopup = true;
2 months ago
} else if (index == 15) {
this.qr_code = 'https://boat-server.njrenzhou.cn/static/qr-public-code.png';
this.isPopup = true;
} else if (index == 4) {
2 months ago
uni.makePhoneCall({
phoneNumber: that.configInfo.mobile,
success: function() {
uni.showToast({
title: '请稍等,拨通中',
duration: 2000
});
},
fail: function() {
},
})
} else if (index == 6) {
uni.navigateTo({
url: "/pages/user/privacyPolicy"
})
} else if (index == 7) {
uni.navigateTo({
url: "/pages/user/aboutUs"
})
} else if (index == 8) {
uni.navigateTo({
url: "/pages/user/reset"
})
} else if (index == 9) {
uni.navigateTo({
url: "/pages/user/withdrawal"
})
} else if (index == 10) {
uni.navigateTo({
url: "/pages/user/team"
})
} else if (index == 11) {
uni.navigateTo({
url: "/pages/user/rebate"
})
} else if (index == 12) {
this.isShow = true
2 months ago
} else if (index == 16) {
this.qr_code = this.userInfo.public_qr_code;
this.isPopup = true;
} else if (index == 13) {
2 months ago
uni.showModal({
title: "温馨提示",
content: "确定要退出吗?",
confirmColor: "#2080F9",
success(res) {
if(res.confirm){
that.toLogout()
}
}
})
} else if (index == 14) {
uni.navigateTo({
url: "/pages/login/login"
})
}
},
//退出登录
async toLogout() {
const { code, data, msg } = await this.$api.logOut({});
if (code == 200) {
uni.showToast({
title: "退出成功"
})
uni.clearStorageSync();
this.userInfo = {}
this.isLogin = false
} else {
uni.showToast({
icon: "none",
title: msg
})
}
},
download(url) {
const that = this;
uni.downloadFile({
url: url, //this.userInfo.qr_code
success: (res) => {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function() {
uni.showToast({
title: "保存成功",
icon: "none"
});
that.isPopup = false
},
fail: function() {
that.isPopup = false
uni.showToast({
title: "保存失败",
icon: "none"
});
}
})
}
})
},
//获取系统设置信息
async getConfig() {
const { code, data, msg } = await this.$api.getConfig({})
if (code == 200) {
this.configInfo = data;
} else {
uni.showToast({
icon: "none",
title: msg
})
}
},
//获取用户信息
async getUserInfo() {
const { code, data, msg } = await this.$api.loginInfo({})
if (code == 200) {
this.userInfo = data;
uni.setStorageSync("userInfo", data)
} else {
uni.showToast({
icon: "none",
title: msg
})
}
},
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
if (this.scrollTop <= 15) {
this.isScrollTop = false;
} else {
this.isScrollTop = true;
}
},
}
</script>
<style lang="scss" scoped>
.user {
width: 100%;
min-height: calc(100vh - 44px);
background: #f6f6f6 url(/static/user-bg.png) center top no-repeat;
background-size: 100% auto;
padding: 0 25rpx 25rpx;
overflow: hidden;
box-sizing: border-box;
&-action {
padding: 30rpx;
overflow: hidden;
display: flex;
align-items: center;
.li {
flex: 1;
text-align: center;
position: relative;
font-size: 26rpx;
font-weight: 400;
color: #333333;
image {
width: 110rpx;
height: 110rpx;
display: block;
margin: 0 auto;
margin-bottom: 20rpx;
}
button {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
opacity: 0;
}
}
}
&-login {
overflow: hidden;
padding: 45rpx 0;
.btn {
width: 200rpx;
margin: 0 auto;
padding: 10rpx 0;
background-color: #FFFFFF;
font-size: 36rpx;
text-align: center;
border-radius: 40rpx;
}
}
&-hd {
display: flex;
align-items: flex-start;
justify-content: space-between;
overflow: hidden;
padding: 45rpx 0;
.a {
flex: 1;
overflow: hidden;
image {
width: 130rpx;
height: 130rpx;
float: left;
margin-right: 25rpx;
border-radius: 50%;
}
.n {
font-size: 36rpx;
font-weight: 400;
color: #FFFFFF;
margin-top: 10rpx;
}
.vip {
width: 130rpx;
height: 40rpx;
float: left;
margin-top: 15rpx;
background: url(/static/icon-vip-bg.png) center top no-repeat;
background-size: contain;
text-align: center;
line-height: 40rpx;
font-size: 24rpx;
font-weight: 400;
color: #2080F9;
}
.mobile{
line-height: 40rpx;
font-size: 28rpx;
font-weight: 400;
color: #fff;
float: left;
margin-top: 15rpx;
}
}
.b {
display: flex;
align-items: center;
font-size: 24rpx;
font-weight: 400;
color: #FFFFFF;
margin-top: 10rpx;
image {
width: 40rpx;
height: 40rpx;
margin-right: 10rpx;
}
}
}
&-money {
width: 640rpx;
height: 110rpx;
background: #212F46;
border-radius: 40rpx 40rpx 0px 0px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 40rpx;
box-sizing: border-box;
.a {
flex: 1;
font-size: 30rpx;
font-weight: 400;
color: #FFFFFF;
display: flex;
align-items: center;
image {
width: 44rpx;
height: 44rpx;
margin-right: 10rpx;
}
}
.b {
font-size: 36rpx;
color: #FFFFFF;
}
}
&-menu {
height: 200rpx;
background: #FFFFFF;
border-radius: 20rpx;
display: flex;
align-items: center;
.a {
width: 25%;
text-align: center;
font-size: 28rpx;
font-weight: 400;
color: #333333;
image {
width: 70rpx;
height: 70rpx;
display: block;
margin: 12rpx auto;
}
}
}
&-bd {
background: #FFFFFF;
border-radius: 20rpx;
padding: 0 30rpx;
overflow: hidden;
margin-top: 20rpx;
.item {
padding: 30rpx 0;
border-top: 1px solid #EAEAEA;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
&:first-child {
border-top-color: #FFFFFF;
}
.a {
flex: 1;
display: flex;
align-items: center;
font-size: 28rpx;
font-weight: 400;
color: #333333;
image {
width: 44rpx;
height: 44rpx;
margin-right: 13rpx;
}
}
.b {
flex: 1;
display: flex;
align-items: center;
justify-content: flex-end;
font-size: 28rpx;
font-weight: 400;
color: #666;
image {
width: 44rpx;
height: 44rpx;
margin-right: 13rpx;
position: relative;
right: -20rpx;
}
}
}
}
&-fd {
width: 100%;
border-radius: 100rpx;
line-height: 100rpx;
border: 1px solid #ddd;
text-align: center;
color: #333;
font-size: 34rpx;
margin-top: 20rpx;
}
.popup-qr {
width: 600rpx;
height: 750rpx;
padding: 80rpx 30rpx 30rpx;
box-sizing: border-box;
text-align: center;
image {
width: 520rpx;
height: 520rpx;
margin-bottom: 30rpx;
}
}
}
</style>