406 lines
8.8 KiB
Vue
406 lines
8.8 KiB
Vue
<template>
|
|
<view
|
|
|
|
style=";height:100vh;"
|
|
>
|
|
<view
|
|
:style="{
|
|
background: `linear-gradient(93deg, rgba(255, 220, 230,1) 45%, rgba(255, 238, 195, 1))`
|
|
}"
|
|
>
|
|
<GNavbar
|
|
left-width="200rpx"
|
|
backgroud-color="transparent"
|
|
:custom-left-fn="true"
|
|
>
|
|
<view
|
|
slot="left"
|
|
class="flex-row flex-center"
|
|
>
|
|
<text
|
|
class="fs-40"
|
|
style="color: #1a1a1a;font-weight: bold;"
|
|
>
|
|
某某短剧
|
|
</text>
|
|
</view>
|
|
</GNavbar>
|
|
</view>
|
|
|
|
<view
|
|
class="flex-1"
|
|
style="position: relative"
|
|
>
|
|
<view class="body-bg" />
|
|
<view
|
|
style="z-index: 99;"
|
|
class="px-28 flex-row pt-48 "
|
|
@click="getUserInfo"
|
|
>
|
|
<image
|
|
class="avatar"
|
|
:src="userInfo.avatar || '/static/images/avatar.png'"
|
|
mode="aspectFit"
|
|
/>
|
|
<view
|
|
class=""
|
|
style="justify-content: center;"
|
|
>
|
|
<view
|
|
class="flex-row"
|
|
style="align-items: center;"
|
|
>
|
|
<text class="nikeName">
|
|
{{ userInfo.nickname || '未登录' }}
|
|
</text>
|
|
<u-icon
|
|
v-if="userInfo.is_vip === 0"
|
|
class="ml-10"
|
|
name="/static/images/member-off.png"
|
|
size="48rpx"
|
|
/>
|
|
<u-icon
|
|
v-else
|
|
class="ml-10"
|
|
name="/static/images/member.png"
|
|
size="48rpx"
|
|
/>
|
|
</view>
|
|
<text
|
|
v-if="uid"
|
|
class="remake mt-10"
|
|
>
|
|
ID:{{ uid }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="userInfo mt-48 px-30 flex-row mb-20"
|
|
style="z-index: 99;"
|
|
>
|
|
<view
|
|
class="flex-row flex-1 "
|
|
style="align-items: center;"
|
|
>
|
|
<view class="flex-row flex-1 flex-center ">
|
|
<view
|
|
class="flex-center mr-120"
|
|
@click="navPay"
|
|
>
|
|
<text class="userInfo-textOne">
|
|
{{ userInfo.egold || 0 }}
|
|
</text>
|
|
<text class="userInfo-textTo mt-14">
|
|
账户K币
|
|
</text>
|
|
</view>
|
|
<view
|
|
class="flex-center"
|
|
@click="navPay"
|
|
>
|
|
<text class="userInfo-textOne">
|
|
{{ userInfo.vip_enddate || 0 }}
|
|
</text>
|
|
<text class="userInfo-textTo mt-14">
|
|
会员天数
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view
|
|
class=" flex-center ml-90"
|
|
style="width: 212rpx;"
|
|
>
|
|
<view
|
|
v-if="platform !== 'ios' && userInfo.ispay === 1"
|
|
class="consumption flex-center"
|
|
@click="navPay"
|
|
>
|
|
<text class="consumption-text">
|
|
立即充值
|
|
</text>
|
|
</view>
|
|
<view
|
|
v-else
|
|
class="immediately flex-center"
|
|
@click="keep"
|
|
>
|
|
<text class="immediately-text">
|
|
立即追剧
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="flex-1 option"
|
|
style="width: 750rpx;"
|
|
>
|
|
<view
|
|
class="flex-row"
|
|
style="align-items: center;justify-content: space-between; "
|
|
@click="seeLs"
|
|
>
|
|
<view class="flex-row">
|
|
<u-icon
|
|
class="mr-34"
|
|
name="/static/icon/history.png"
|
|
size="48rpx"
|
|
/>
|
|
<text class="option-text">
|
|
历史观看
|
|
</text>
|
|
</view>
|
|
<image
|
|
src="@/static/icon/arrowLeft.png"
|
|
mode="aspectFill"
|
|
style="width:18rpx;height: 32rpx ;"
|
|
/>
|
|
</view>
|
|
<view
|
|
v-if="historyList.length !== 0"
|
|
class="mt-28 "
|
|
>
|
|
<u-scroll-list :indicator="false">
|
|
<view
|
|
v-for="(item, index) in historyList"
|
|
:key="index"
|
|
@click="historyItem(item)"
|
|
>
|
|
<image
|
|
class="dataItem-img"
|
|
:src="item.cover"
|
|
mode="aspectFill"
|
|
/>
|
|
</view>
|
|
</u-scroll-list>
|
|
</view>
|
|
<view
|
|
class="flex-row mt-62"
|
|
style="align-items: center;justify-content: space-between; "
|
|
@click="navGetRouter('/pages/my/recharge/index')"
|
|
>
|
|
<view class="flex-row">
|
|
<u-icon
|
|
class="mr-34"
|
|
name="/static/icon/wallet.png"
|
|
size="48rpx"
|
|
/>
|
|
<text class="option-text">
|
|
充值明细
|
|
</text>
|
|
</view>
|
|
<image
|
|
src="@/static/icon/arrowLeft.png"
|
|
mode="aspectFill"
|
|
style="width:18rpx;height: 32rpx ;"
|
|
/>
|
|
</view>
|
|
<view
|
|
class="flex-row mt-62"
|
|
style="align-items: center;justify-content: space-between; "
|
|
@click="getServiceVx"
|
|
>
|
|
<view class="flex-row">
|
|
<u-icon
|
|
class="mr-34"
|
|
name="/static/icon/service.png"
|
|
size="48rpx"
|
|
/>
|
|
<text class="option-text">
|
|
联系客服
|
|
</text>
|
|
</view>
|
|
<image
|
|
src="@/static/icon/arrowLeft.png"
|
|
mode="aspectFill"
|
|
style="width:18rpx;height: 32rpx ;"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { history, getUserInfo, getkefu, renew } from '@/api/index.js';
|
|
|
|
export default {
|
|
data() {
|
|
const uid = uni.getStorageSync('uid') || '';
|
|
return {
|
|
userInfo: {},
|
|
historyList: [],
|
|
uid,
|
|
platform: ''
|
|
};
|
|
},
|
|
onShow() {
|
|
const isPopup = uni.getStorageSync('isPopup');
|
|
if(isPopup){
|
|
uni.navigateTo({
|
|
url:'/pages/pay/pay'
|
|
});
|
|
}
|
|
if(!this.userInfo.avatar){
|
|
this.$showLoading(true);
|
|
}
|
|
|
|
this.platform = uni.getSystemInfoSync().platform;
|
|
this.getData();
|
|
},
|
|
methods: {
|
|
getUserInfo() {
|
|
if (!this.userInfo.nickname && !this.userInfo.avatar) {
|
|
// #ifdef MP-TOUTIAO
|
|
tt.getUserProfile({
|
|
success: res => {
|
|
console.log(res);
|
|
const userInfo = res.userInfo;
|
|
renew({
|
|
nickname: userInfo.nickName,
|
|
avatar: userInfo.avatarUrl
|
|
}).then(res => {
|
|
this.userInfo.avatar = userInfo.avatarUrl;
|
|
this.userInfo.nickname = userInfo.nickName;
|
|
});
|
|
}
|
|
});
|
|
// #endif
|
|
}
|
|
},
|
|
historyItem(e) {
|
|
uni.navigateTo({
|
|
url: `/pages/video/index?sid=${e.sid}`
|
|
});
|
|
},
|
|
navPay() {
|
|
if (this.userInfo.ispay) {
|
|
uni.navigateTo({
|
|
url: '/pages/pay/pay'
|
|
});
|
|
}
|
|
},
|
|
seeLs(){
|
|
uni.navigateTo({
|
|
url:'/pages/my/history/index'
|
|
});
|
|
},
|
|
navGetRouter(url) {
|
|
uni.navigateTo({
|
|
url: url
|
|
});
|
|
},
|
|
getData() {
|
|
history().then(res => {
|
|
this.historyList = res;
|
|
});
|
|
getUserInfo().then(res => {
|
|
this.userInfo = res.info || {};
|
|
this.$showLoading(false);
|
|
});
|
|
},
|
|
getServiceVx() {
|
|
getkefu().then(res => {
|
|
uni.setClipboardData({
|
|
data: res.wxkf,
|
|
showToast: false,
|
|
success: function() {
|
|
uni.showToast({
|
|
title: '客服微信已复制',
|
|
duration: 2000
|
|
});
|
|
}
|
|
});
|
|
});
|
|
},
|
|
keep() {
|
|
uni.switchTab({
|
|
url: '/pages/playlet/index'
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.avatar {
|
|
width: 162rpx;
|
|
height: 162rpx;
|
|
margin-right: 20rpx;
|
|
border-radius: 50%;
|
|
}
|
|
.nikeName {
|
|
font-size: 44rpx;
|
|
font-weight: bold;
|
|
color: #1a1a1a;
|
|
}
|
|
.remake {
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
}
|
|
.userInfo {
|
|
height: 184rpx;
|
|
width: 750rpx;
|
|
border-radius: 40rpx 40rpx 0 0;
|
|
background-color: #ffffff;
|
|
}
|
|
.userInfo-textOne {
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
color: #1a1a1a;
|
|
}
|
|
.userInfo-textTo {
|
|
font-size: 30rpx;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
}
|
|
.consumption {
|
|
width: 212rpx;
|
|
height: 76rpx;
|
|
background: linear-gradient(89deg, #ff6c90 0%, #ff002e 100%);
|
|
border-radius: 18rpx;
|
|
.consumption-text {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
.option {
|
|
background-color: #ffffff;
|
|
padding: 48rpx 30rpx;
|
|
.option-text {
|
|
font-size: 34rpx;
|
|
font-weight: 500;
|
|
color: #1a1a1a;
|
|
}
|
|
.dataItem-img {
|
|
width: 192rpx;
|
|
height: 260rpx;
|
|
border-radius: 16rpx;
|
|
margin-right: 26rpx;
|
|
}
|
|
}
|
|
.body-bg {
|
|
position: absolute;
|
|
top: -4rpx;
|
|
width: 750rpx;
|
|
z-index: 0;
|
|
height: 434rpx;
|
|
background: url('https://diyyhdapi.qinjiu8.com/backImg.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
.immediately {
|
|
width: 212rpx;
|
|
height: 76rpx;
|
|
background: linear-gradient(92deg, #ff6636 0%, #ffa236 100%);
|
|
border-radius: 50rpx;
|
|
.immediately-text {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
</style>
|