czg_team/video_app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
GYJ
2024-12-02 10:39:36 +08:00
commit f1f5b666b5
464 changed files with 81372 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

847
pages/me/index.vue Normal file
View File

@@ -0,0 +1,847 @@
<template>
<view style="padding-bottom: 40rpx;">
<u-navbar :background="background" :is-back="false" :title="title" :border-bottom="false">
</u-navbar>
<!-- 登录信息 -->
<view class="info flex align-center justify-center">
<view class="info-box">
<view @click="token?goNav('/pages/me/userinfo'):goNav('/pages/login/login')"
class="info-box-c flex align-center justify-between">
<view class="info-box-c-l flex align-center">
<view class="info-box-c-l-avatar">
<image :src="avatar?avatar:'../../static/images/logo.png'" mode=""></image>
</view>
<view class="info-box-c-l-name">
<view class="info-box-c-l-name-t">
{{userName?userName:'未登录'}}
</view>
<view class="info-box-c-l-name-b" v-if="invitationCode">
ID:{{invitationCode}}
</view>
</view>
</view>
<view class="info-box-c-r">
<u-icon name="arrow-right" color="#F6F6F6" size="28"></u-icon>
</view>
</view>
</view>
</view>
<!-- 统计 -->
<view class="statistics flex align-center justify-center">
<view class="statistics-box flex align-center justify-between">
<view class="statistics-box-item" @click="goNav('/me/jilu/myLove')">
<view class="statistics-box-item-top">
{{myLoveNum}}
</view>
<view class="statistics-box-item-btn">
我的喜欢
</view>
</view>
<view class="statistics-box-item" @click="goNav('/me/jilu/histor')">
<view class="statistics-box-item-top">
{{myZhui}}
</view>
<view class="statistics-box-item-btn">
我的追剧
</view>
</view>
<view class="statistics-box-item" @click="goNav('/me/jifen/jifen')">
<view class="statistics-box-item-top">
{{jifen}}
</view>
<view class="statistics-box-item-btn">
我的积分
</view>
</view>
</view>
</view>
<view v-if="isVips == '是' && isWxIosPay == true" class="vip flex align-center justify-center">
<view class="vip-box flex align-center justify-between">
<view class="vip-box-l">
<view class="vip-box-l-l flex align-center">
{{isVIP?'会员用户':'开通会员'}}
<image src="../../static/images/me/Vips.png" mode=""></image>
</view>
<view class="vip-box-l-r" v-if="isVIP">
{{endTime?endTime+'到期':'您是尊贵的永久会员'}}
</view>
<view class="vip-box-l-r" v-else>
{{endTime?endTime+'到期':'升级VIP，省更多钱'}}
</view>
</view>
<view v-if="!isVIP" @click="goNav('/pages/me/vip/index')"
class="vip-box-r flex align-center justify-center">
立即开通
</view>
</view>
</view>
<!-- 钱包 -->
<view class="money flex align-center justify-center" v-if="isWxIosPay == true">
<view class="money-box flex align-center justify-between">
<view class="">
<view class="money-box-title flex align-center">
<view class="money-box-title-l">
金豆余额
</view>
<view @click="isShoMoney = !isShoMoney" class="money-box-title-r" style="margin-left: 12rpx;">
<u-icon :name="isShoMoney?'eye':'eye-off'" color="#5A4A32" size="40"></u-icon>
</view>
</view>
<view class="money-box-price">
<block v-if="isShoMoney">
{{formatNumber(moneyNum)}}
</block>
<block v-else>
****
</block>
</view>
</view>
<view class="money-box-btn" @click="goNav('/me/wallet/wallet')">
立即充值
</view>
</view>
</view>
<!-- 常用工具 -->
<view class="tool flex align-center justify-center">
<view class="tool-box">
<view class="tool-box-content flex align-center justify-between flex-wrap">
<!-- #ifdef MP-TOUTIAO -->
<view class="tool-box-content-item flex align-center justify-center flex-wrap"
@click="goNav('/me/wallet/mingxi')">
<view class="tool-box-content-item-img">
<image src="../../static/images/me/mingxi.png" mode=""></image>
</view>
<view class="tool-box-content-item-txt">
钱包明细
</view>
</view>
<!-- #endif -->
<view v-if="kmPaySel != '否'" @click="openKaMiShow()"
class="tool-box-content-item flex align-center justify-center flex-wrap">
<view class="tool-box-content-item-img">
<image src="../../static/images/me/kami.png" mode=""></image>
</view>
<view class="tool-box-content-item-txt">
卡密兑换
</view>
</view>
<view class="tool-box-content-item flex align-center justify-center flex-wrap"
@click="goNav('/me/invite/index')">
<view class="tool-box-content-item-img">
<image src="../../static/images/me/vfx.png" mode=""></image>
</view>
<view class="tool-box-content-item-txt">
分享好友
</view>
</view>
<view class="tool-box-content-item flex align-center justify-center flex-wrap"
@click="goNav('/me/message/index')">
<view class="tool-box-content-item-img">
<image src="../../static/images/me/messige.png" mode=""></image>
</view>
<view class="tool-box-content-item-txt">
消息中心
</view>
<u-badge :offset="[0,20]" type="error" :count="numCount"></u-badge>
</view>
<view class="tool-box-content-item flex align-center justify-center flex-wrap"
@click="goNav('/me/jilu/jilu')">
<view class="tool-box-content-item-img">
<image src="../../static/images/me/vlishi.png" mode=""></image>
</view>
<view class="tool-box-content-item-txt">
观看历史
</view>
</view>
<view v-if="rate>0" class="tool-box-content-item flex align-center justify-center flex-wrap"
@click="goNav('/me/invite/inviteDet')">
<view class="tool-box-content-item-img">
<image src="../../static/images/me/vtd.png" mode=""></image>
</view>
<view class="tool-box-content-item-txt">
我的团队
</view>
</view>
<view class="tool-box-content-item flex align-center justify-center flex-wrap" @click="goMsg()">
<view class="tool-box-content-item-img">
<image src="../../static/images/me/vkf.png" mode=""></image>
</view>
<view class="tool-box-content-item-txt">
联系客服
</view>
</view>
<view class="tool-box-content-item flex align-center justify-center flex-wrap"
@click="goNav('/me/feedbackIndex/feedbackIndex')">
<view class="tool-box-content-item-img">
<image src="../../static/images/me/bangzhu.png" mode=""></image>
</view>
<view class="tool-box-content-item-txt">
帮助中心
</view>
</view>
<view class="tool-box-content-item flex align-center justify-center flex-wrap"
@click="goNav('/me/feedback/index')">
<view class="tool-box-content-item-img">
<image src="../../static/images/me/yijian.png" mode=""></image>
</view>
<view class="tool-box-content-item-txt">
意见反馈
</view>
</view>
<view class="tool-box-content-item flex align-center justify-center flex-wrap"
@click="goNav('/me/setting/index')">
<view class="tool-box-content-item-img">
<image src="../../static/images/me/setting.png" mode=""></image>
</view>
<view class="tool-box-content-item-txt">
设置中心
</view>
</view>
<view class="tool-box-content-item flex align-center justify-center flex-wrap" style="height: 0;">
</view>
<view class="tool-box-content-item flex align-center justify-center flex-wrap" style="height: 0;">
</view>
</view>
</view>
</view>
<!-- 卡密兑换弹窗 -->
<u-popup @close="kami = ''" v-model="showCard" mode="center" border-radius="14" :closeable="true">
<view class="kami">
<view class="kami-title">
卡密兑换
</view>
<view class="kami-input">
<u-input v-model="kami" placeholder="请输入卡密" type="text" :border="true" />
</view>
<view @click="exchangeKaMi()" class="kami-btn flex align-center justify-center">
确认兑换
</view>
</view>
</u-popup>
<!-- 抖音im客服 -->
<ttMsg />
</view>
</template>
<script>
import ttMsg from '../../components/ttMsg/ttMsg.vue'
export default {
components: {
ttMsg
},
data() {
return {
title: '',
background: {
backgroundImage: 'linear-gradient(to right, #FFE5EA 0%, #E4F5FB 49%, #FFF0EE 100%)'
},
kami: '', //卡密
isShoMoney: false, //是否显示余额
avatar: '../../static/images/logo.png',
img: '../../static/images/me/huiyuan.png',
swiperList: [{
imageUrl: '../../static/images/me/banner.png',
}],
isLogin: false,
userName: '未登录',
isVIP: false,
invitationCode: '',
token: '',
endTime: '', //会员到期时间
moneyNum: 0, //余额
jifen: 0, //积分
isVips: '否', //是否显示会员
myLoveNum: 0, //我的喜欢个数
myZhui: 0, //我的追剧数量
showCard: false,
numCount: 0,
rate: 0,
kmPaySel: '否',
isWxIosPay: true, //微信下是否显示支付功能
}
},
onLoad() {
this.getBannerList()
},
onShow() {
this.isWxIosPay = uni.getStorageSync('isWxIosPay')
this.kmPaySel = this.$queue.getData('kmPaySel');
this.numCount = uni.getStorageSync('numCount')
this.isVips = uni.getStorageSync('isVips') ? uni.getStorageSync('isVips') : '否'
this.token = uni.getStorageSync('token')
if (this.token) {
this.getMyMoney()
this.getJifen()
this.$u.api.userinfo().then(res => {
if (res.code == 0 && res.data) {
uni.setStorageSync('zhiFuBao', res.data.zhiFuBao)
uni.setStorageSync('zhiFuBaoName', res.data.zhiFuBaoName)
uni.setStorageSync('userName', res.data.userName)
uni.setStorageSync('avatar', res.data.avatar)
this.userName = res.data.userName
this.avatar = res.data.avatar
this.invitationCode = res.data.invitationCode
if (res.data.rate) {
this.rate = (Number(res.data.rate) * 100).toFixed(0)
} else {
this.rate = 0
}
}
})
let data = {
userId: uni.getStorageSync('userId')
}
this.$u.api.userVip(data).then(res => {
if (res.code == 0 && res.data && res.data.isVip == 2) {
this.isVIP = true;
this.endTime = res.data.endTime
uni.setStorageSync('isVIP', true)
} else {
this.isVIP = false;
this.endTime = ''
uni.setStorageSync('isVIP', false)
}
})
this.isLogin = true
this.userName = uni.getStorageSync('userName')
this.isVIP = uni.getStorageSync('isVIP')
this.getMyLoveNum()
this.getMyZhuiNum()
} else {
this.isLogin = false
this.isVIP = false
this.endTime = '' //会员到期时间
this.moneyNum = 0 //余额
this.jifen = 0 //积分
this.userName = '未登录'
this.invitationCode = ''
this.myLoveNum = 0
this.myZhui = 0
this.rate = 0
}
this.avatar = uni.getStorageSync('avatar') ? uni.getStorageSync('avatar') : '../../static/images/logo.png'
},
methods: {
//兑换卡密
exchangeKaMi() {
if (!this.kami) {
uni.showToast({
title: '请输入卡密',
icon: 'none'
})
return
}
let data = {
sdkContent: this.kami
}
this.$Request.postT('/app/sdkInfo/sdkExchange', data).then(res => {
if (res.code == 0) {
uni.showToast({
title: '兑换成功'
})
this.showCard = false
let datas = {
userId: uni.getStorageSync('userId')
}
this.$u.api.userVip(datas).then(rest => {
if (rest.code == 0 && rest.data && rest.data.isVip == 2) {
this.isVIP = true;
this.endTime = rest.data.endTime
uni.setStorageSync('isVIP', true)
} else {
this.isVIP = false;
this.endTime = ''
uni.setStorageSync('isVIP', false)
}
})
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
})
},
openKaMiShow() {
if (uni.getStorageSync('token')) {
this.showCard = true
} else {
uni.navigateTo({
url: "/pages/login/login"
})
}
},
//获取我喜欢的数量
getMyLoveNum() {
let data = {
page: 1,
limit: 1,
classify: 2
}
this.$Request.getT('/app/courseCollect/selectByUserId', data).then(res => {
if (res.code == 0) {
this.myLoveNum = res.data.total
} else {
this.myLoveNum = 0
}
})
},
//获取我追剧的数量
getMyZhuiNum() {
let data = {
page: 1,
limit: 1,
classify: 1
}
this.$Request.getT('/app/courseCollect/selectByUserId', data).then(res => {
if (res.code == 0) {
this.myZhui = res.data.total
} else {
this.myZhui = 0
}
})
},
/**
* 获取积分
*/
getJifen() {
this.$Request.getT('/app/integral/selectByUserId').then(res => {
if (res.code == 0) {
this.jifen = res.data.integralNum
} else {
this.jifen = 0
}
})
},
/**
* @param {Number} num
* @param 保留两位小数
*/
formatNumber(num) {
// 判断是否为整数
if (Number.isInteger(num)) {
return num.toFixed(2);
} else {
return num.toFixed(2).replace(/\.?0+$/, '');
}
},
/**
* 获取余额
*/
getMyMoney() {
this.$Request.getT('/app/moneyDetails/selectUserMoney').then(res => {
if (res.code == 0) {
this.moneyNum = res.data.money
// this.$Request.getT('/app/invite/selectInviteMoney').then(ret => {
// if (ret.code == 0) {
// if (ret.data.inviteMoney && ret.data.inviteMoney.money) {
// this.moneyNum = Number(res.data.money) + Number(ret.data.inviteMoney
// .money)
// } else {
// this.moneyNum = Number(res.data.money)
// }
// }
// })
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
})
},
goPage(url) {
if (url) {
if (url.indexOf('/pages/') !== -1 || url.indexOf('/me/') !== -1) {
uni.navigateTo({
url
});
} else {
//#ifndef H5
uni.navigateTo({
url: '/pages/index/webView?url=' + url
});
//#endif
//#ifdef H5
window.location.href = url;
//#endif
}
}
},
goMsg() {
let kefu = uni.getStorageSync('kefu'); // 用户端联系方式 1 手机号 2企业微信
let kefuPhone = uni.getStorageSync('kefuPhone');
if (kefu == 1) {
uni.navigateTo({
url: '/me/setting/kefu'
})
} else if (kefu == 3) {
uni.makePhoneCall({
phoneNumber: kefuPhone //仅为示例
});
} else if (kefu == 2) {
// #ifdef MP-WEIXIN
let that = this
try {
wx.openCustomerServiceChat({
extInfo: {
url: uni.getStorageSync('kefuUrl')
},
corpId: uni.getStorageSync('kefuAppId'),
success(res) {},
fail(res) {
console.error(res)
}
})
} catch (error) {
console.error("catchcatch" + error)
uni.showToast({
title: '请更新至微信最新版本'
});
}
// #endif
// #ifndef MP-WEIXIN
let url = uni.getStorageSync('kefuUrl');
if (url.indexOf('/pages/') !== -1 || url.indexOf('/my/') !== -1) {
uni.navigateTo({
url
});
} else {
//#ifndef H5
uni.navigateTo({
url: '/pages/index/webView?url=' + url
});
//#endif
//#ifdef H5
window.location.href = url;
//#endif
}
// #endif
}
},
goNav(e) {
console.log(e)
let token = uni.getStorageSync('token')
if (token) {
uni.navigateTo({
url: e
})
} else {
uni.navigateTo({
url: "/pages/login/login"
})
}
},
// 获取轮播图列表
getBannerList() {
this.$u.api.bannerList({
classify: '3'
}).then(res => {
if (res.code == 0 && res.data) {
let arr = []
res.data.forEach(ret => {
if (ret.state == 1) {
arr.push(ret)
}
})
this.swiperList = arr
} else {
uni.showToast({
title: res.msg,
icon: 'none'
});
}
})
},
}
}
</script>
<style lang="scss">
page {
background-color: #F5F7FF;
}
/deep/.u-navbar-inner {
/* #ifdef H5 */
background: linear-gradient(to right, #FFE5EA 0%, #E4F5FB 49%, #FFF0EE 100%);
/* #endif */
}
.kami {
width: 500rpx;
height: auto;
background-color: #FFFFFF;
.kami-title {
width: 100%;
text-align: center;
margin-top: 30rpx;
font-size: 30rpx;
font-weight: bold;
}
.kami-input {
padding: 30rpx;
}
.kami-btn {
width: calc(100% - 60rpx);
height: 80rpx;
margin: 0 auto;
background-color: #ff7581;
border-radius: 44rpx;
color: #FFFFFF;
margin-top: 10rpx;
margin-bottom: 40rpx;
}
}
.info::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to right, #FFE5EA 0%, #E4F5FB 49%, #FFF0EE 100%);
z-index: 1;
/* 确保在垂直渐变之上 */
}
.info::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, transparent, #F5F7FF);
/* 垂直渐变，结束颜色为透明 */
z-index: 2;
/* 确保在水平渐变之上 */
}
.info {
width: 100%;
height: auto;
// height: 400rpx;
background: #F5F7FF;
position: relative;
border-radius: 0 0 80rpx 80rpx;
.info-box {
width: 686rpx;
height: 100%;
position: relative;
z-index: 3;
}
.info-box-c {
width: 100%;
height: 94rpx;
// margin-top: 60rpx;
margin-bottom: 140rpx;
}
.info-box-c-l-avatar {
width: 94rpx;
height: 94rpx;
border-radius: 50%;
image {
width: 94rpx;
height: 94rpx;
border-radius: 50%;
}
}
.info-box-c-l-name {
margin-left: 16rpx;
.info-box-c-l-name-t {
color: #333333;
font-size: 32rpx;
font-weight: bold;
}
.info-box-c-l-name-b {
color: #333333;
font-size: 24rpx;
font-weight: 400;
}
}
}
.statistics {
width: 100%;
height: auto;
margin-top: -100rpx;
position: relative;
z-index: 3;
.statistics-box {
width: 686rpx;
// height: 184rpx;
// background-color: #FFFFFF;
border-radius: 24rpx;
}
.statistics-box-item {
// width: calc(100% / 3);
// height: 100%;
}
.statistics-box-item-top {
width: 100%;
text-align: center;
color: #333333;
font-size: 38rpx;
font-weight: bold;
}
.statistics-box-item-btn {
width: 100%;
text-align: center;
color: #999999;
font-size: 26rpx;
// margin-top: 20rpx
}
}
.vip {
width: 100%;
// height: 84rpx;
margin-top: 30rpx;
.vip-box {
width: 686rpx;
height: 100%;
background: linear-gradient(90deg, #FEF5E4 0%, #FBECD7 100%);
border-radius: 24rpx;
padding: 26rpx 30rpx;
}
.vip-box-l {
image {
width: 24rpx;
height: 22rpx;
margin-left: 6rpx;
}
}
.vip-box-l-l {
font-size: 32rpx;
font-weight: 800;
color: #5A4A32;
line-height: 32rpx;
}
.vip-box-l-r {
color: #817858;
font-size: 26rpx;
margin-top: 6rpx;
}
.vip-box-r {
width: 130rpx;
height: 50rpx;
background: #FFFFFF;
box-shadow: 0rpx -3rpx 9rpx 0rpx rgba(255, 255, 255, 0.46);
border-radius: 25rpx;
color: #5A4A32;
font-size: 22rpx;
}
}
.money {
width: 100%;
height: auto;
margin-top: 20rpx;
.money-box {
width: 686rpx;
height: 100%;
border-radius: 24rpx;
background: #ffffff;
padding: 30rpx;
}
.money-box-btn {
background: linear-gradient(90deg, #FF7581 0%, #F8A5AF 100%);
border-radius: 44rpx;
padding: 18rpx 30rpx;
font-size: 24rpx;
color: #ffffff;
font-weight: bold;
}
.money-box-title-l {
color: #333333;
font-size: 28rpx;
font-weight: normal;
}
.money-box-price {
color: #333333;
font-size: 48rpx;
font-weight: 800;
margin-top: 20rpx;
}
}
.tool {
width: 100%;
height: auto;
margin-top: 20rpx;
.tool-box {
width: 686rpx;
height: 100%;
background-color: #FFFFFF;
border-radius: 24rpx;
}
.tool-box-content {
width: 100%;
height: auto;
padding: 30rpx 30rpx 0 30rpx;
}
.tool-box-content-item {
width: 130rpx;
height: auto;
margin-bottom: 46rpx;
position: relative;
}
.tool-box-content-item-img {
width: 66rpx;
height: 66rpx;
image {
width: 66rpx;
height: 66rpx;
}
}
.tool-box-content-item-txt {
width: 100%;
text-align: center;
margin-top: 10rpx;
color: #333333;
font-size: 24rpx;
}
}
</style>