395 lines
7.4 KiB
Plaintext
395 lines
7.4 KiB
Plaintext
<template>
|
||
<view class="container" :style="{ height: data.windowHeight + 'px' }">
|
||
<image class="index-bg-img" :style="{ width: windowWidth + 'px' }" src="/static/image/index/index-bg.png"
|
||
mode="widthFix">
|
||
</image>
|
||
<view class="nav-bar-box">
|
||
<view class="status-box" :style="{ height: statusBarHeight + 'px' }"></view>
|
||
<view class="nav-box">
|
||
<view class="left-box">
|
||
<image style="width: 40rpx; height: 40rpx;" src="/static/image/nav-bar/back-black.png"></image>
|
||
</view>
|
||
<view class="title">小宝模拟器</view>
|
||
<view class="right-box"></view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="content-box">
|
||
<view class="user-box">
|
||
<image class="user-bg" :style="{ width: (windowWidth - 32) + 'px' }"
|
||
:src="`/static/image/index/${userInfo.vip > 1 ? (userInfo.vip == 3 ? 'lifetime-vip-bg' : 'vip-bg') : 'no-vip-bg'}.png`"
|
||
mode=""></image>
|
||
<view class="user-info-box" :style="{ width: (windowWidth - 32) + 'px' }">
|
||
<image class="user-avatar" :src="userInfo.avater"></image>
|
||
<view class="user-info">
|
||
<view class="name-box">
|
||
<text class="phone-text">ID：{{ userInfo.user_id }}</text>
|
||
<image v-if="userInfo.vip > 1" class="vip-logo" src="/static/image/index/vip-logo.png">
|
||
</image>
|
||
</view>
|
||
<view class="">
|
||
<text v-if="userInfo.vip > 1" class="vip-end-time">会员到期：{{ userInfo.vip_expire }}</text>
|
||
<text v-else class="vip-end-time">开通会员解锁全部功能</text>
|
||
</view>
|
||
</view>
|
||
<view v-if="userInfo.vip && userInfo.vip != 3" class="btn-box">
|
||
<image class="open-vip-btn"
|
||
:src="`/static/image/index/${userInfo.vip > 1 ? 'vip-btn' : 'open-vip-btn'}.png`"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="notice-box">
|
||
<uni-icons type="sound" size="18" color="#D8D8D8"></uni-icons>
|
||
<text class="notice-content">欢迎大家使用装样大师，使用中有问题客服为您解答</text>
|
||
</view>
|
||
|
||
<view class="group-box">
|
||
<image class="title-img" src="/static/image/index/shipingjiaocheng.png"></image>
|
||
<view class="video-help-box">
|
||
|
||
</view>
|
||
</view>
|
||
|
||
<view class="group-box">
|
||
<image class="title-img" src="/static/image/index/monixiaobao.png"></image>
|
||
<view class="menu-box">
|
||
<view class="item-box" v-for="item in menuList" :key="item.name" @click="util.goPage(item.path)">
|
||
<view class="menu-item" :style="{ width: (windowWidth - 50) / 2 + 'px' }">
|
||
<!-- <text class="menu-item-name">{{ item.name }}</text> -->
|
||
<image class="name-img" :src="'/static/image/index/menu-name/' + item.icon + '.png'"
|
||
mode="heightFix">
|
||
</image>
|
||
<image style="width: 108rpx;height: 108rpx; flex-shrink: 0;"
|
||
:src="'/static/image/index/menu-icon/' + item.icon + '.png'"></image>
|
||
</view>
|
||
<image v-if="item.isHot" class="hot-icon" src="/static/image/index/hot-icon.png"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="activity-box">
|
||
<image class="alipay-year-bill" :style="{ width: (windowWidth - 32) + 'px' }"
|
||
src="/static/image/index/alipay-year-bill.png" mode="widthFix"></image>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
<script setup>
|
||
import {
|
||
util
|
||
} from '@/utils/common.js'
|
||
import {
|
||
storage
|
||
} from '@/utils/storage.js'
|
||
import {
|
||
ref,
|
||
reactive,
|
||
toRefs
|
||
} from 'vue';
|
||
import {
|
||
onLoad,
|
||
onShow
|
||
} from '@dcloudio/uni-app';
|
||
|
||
// 菜单列表
|
||
const menuList = [
|
||
{
|
||
icon: "yuemoni",
|
||
name: "余额模拟",
|
||
isHot: false,
|
||
path: "/pages/balance/index"
|
||
},
|
||
{
|
||
icon: "zhangdanshencheng",
|
||
name: "账单生成",
|
||
isHot: false,
|
||
path: "/pages/bill/bill-list/bill-list"
|
||
},
|
||
{
|
||
icon: "licaiheika",
|
||
name: "理财黑卡",
|
||
isHot: true,
|
||
path: ""
|
||
},
|
||
{
|
||
icon: "huabei",
|
||
name: "花呗",
|
||
isHot: false,
|
||
path: ""
|
||
},
|
||
|
||
]
|
||
|
||
const data = reactive({
|
||
statusBarHeight: 0,
|
||
windowWidth: 0,
|
||
windowHeight: 0,
|
||
userInfo: {}
|
||
})
|
||
|
||
const {
|
||
statusBarHeight,
|
||
windowWidth,
|
||
userInfo
|
||
} = toRefs(data);
|
||
|
||
onLoad(() => {
|
||
setUserData()
|
||
})
|
||
|
||
onShow(() => {
|
||
// 获取系统信息
|
||
const systemInfo = uni.getSystemInfoSync();
|
||
data.statusBarHeight = systemInfo.statusBarHeight;
|
||
data.windowWidth = systemInfo.windowWidth;
|
||
data.windowHeight = systemInfo.windowHeight;
|
||
// #ifdef APP-PLUS
|
||
util.setAndroidSystemBarColor('#F0F4F9')
|
||
// #endif
|
||
})
|
||
/**
|
||
* 设置用户数据
|
||
*/
|
||
const setUserData = () => {
|
||
data.userInfo = storage.get("userInfo")
|
||
console.log(data.userInfo)
|
||
}
|
||
</script>
|
||
<style>
|
||
.container {
|
||
background-color: #F0F4F9;
|
||
}
|
||
|
||
.index-bg-img {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 1;
|
||
}
|
||
|
||
.nav-bar-box {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 999;
|
||
background-color: transparent;
|
||
}
|
||
|
||
.content-box {
|
||
position: fixed;
|
||
top: 150rpx;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 999;
|
||
background-color: transparent;
|
||
}
|
||
|
||
.status-box {
|
||
width: 100%;
|
||
}
|
||
|
||
.nav-box {
|
||
height: 44px;
|
||
background-color: transparent;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.left-box {
|
||
width: 60px;
|
||
height: 44px;
|
||
background-color: transparent;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.title {
|
||
flex: 1;
|
||
height: 44px;
|
||
font-size: 32rpx;
|
||
color: #1A1A1A;
|
||
font-weight: bold;
|
||
background-color: transparent;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.right-box {
|
||
width: 60px;
|
||
height: 44px;
|
||
background-color: transparent;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.user-box {
|
||
position: relative;
|
||
margin: 0 32rpx 0;
|
||
height: 120rpx;
|
||
z-index: 10;
|
||
}
|
||
|
||
.user-bg {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 120rpx;
|
||
}
|
||
|
||
.user-info-box {
|
||
position: absolute;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 32rpx;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 120rpx;
|
||
z-index: 1;
|
||
}
|
||
|
||
.user-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.user-avatar {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
border-radius: 50%;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.name-box {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
.phone-text {
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
font-weight: bold;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.vip-logo {
|
||
width: 60rpx;
|
||
height: 20rpx;
|
||
}
|
||
|
||
.vip-end-time {
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.open-vip-btn {
|
||
height: 40rpx;
|
||
width: 116rpx;
|
||
}
|
||
|
||
.notice-box {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
margin: 16rpx 32rpx 0;
|
||
background-color: #FFFFFF;
|
||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||
padding: 0 16rpx;
|
||
height: 64rpx;
|
||
}
|
||
|
||
.notice-content {
|
||
font-size: 24rpx;
|
||
color: #767676;
|
||
margin-left: 8rpx;
|
||
}
|
||
|
||
.group-box {
|
||
margin: 32rpx;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.title-img {
|
||
width: 140rpx;
|
||
height: 44rpx;
|
||
}
|
||
|
||
.video-help-box {
|
||
background-color: #FFFFFF;
|
||
padding: 24rpx 32rpx;
|
||
border-radius: 24rpx;
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
.menu-box {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
.item-box {
|
||
position: relative;
|
||
height: 156rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
.menu-item {
|
||
display: flex;
|
||
position: relative;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background-color: #FFFFFF;
|
||
border-radius: 16rpx;
|
||
padding: 16rpx 32rpx;
|
||
height: 140rpx;
|
||
}
|
||
|
||
|
||
.menu-item-name {
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #000000;
|
||
}
|
||
|
||
.name-img {
|
||
height: 28rpx;
|
||
}
|
||
|
||
.hot-icon {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 72rpx;
|
||
height: 32rpx;
|
||
z-index: 99;
|
||
}
|
||
|
||
.activity-box {
|
||
margin: 0 32rpx;
|
||
}
|
||
|
||
.alipay-year-bill {
|
||
/* width: 100%; */
|
||
}
|
||
</style> |