dykj-football/pages/user/index.vue
2024-04-19 16:35:16 +08:00

233 lines
5.9 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view :style="{ backgroundPositionY: -44 + safeAreaInsets.top + 'px' }" class="index-page">
<!-- 自定义导航 -->
<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">我的</view>
</view>
<view class="back-color">
<view class="userInfo">
<view class="userInfo-text">
<span style="font-size: 20px; font-weight: 600;">{{'Mr.wang'}}</span>
<span style="font-size: 10px;">{{'元宝100.00'}}</span>
<span style="font-size: 10px;">{{'积分:40'}}</span>
</view>
<view class="user-img">
<u-avatar shape="circle" size="55" :src="src" customStyle="margin: -3px 5px -3px 0" />
<u-icon name="arrow-right" color="#646668" size="28"></u-icon>
</view>
</view>
<view class="contentInfo">
<view class="gridBox">
<view class="gridBox-top">
<view class="gridBox-spuare" @click="VIPMember">
<u-avatar shape="circle" size="55" :src="srcOne" customStyle="margin: -3px 5px -3px 0" />
<span>vip</span>
</view>
<view class="gridBox-spuare" @click="recharge">
<u-avatar shape="circle" size="55" :src="srcOne" customStyle="margin: -3px 5px -3px 0" />
<span>充值</span>
</view>
<view class="gridBox-spuare">
<u-avatar shape="circle" size="55" :src="srcOne" customStyle="margin: -3px 5px -3px 0" />
<span>消息提醒</span>
</view>
</view>
<view class="gridBox-bottom">
<view class="gridBox-rectangle" @click="signIn">
<span>签到</span>
<u-avatar shape="circle" size="35" :src="srcOne" customStyle="margin: -3px 5px -3px 0" />
</view>
<view class="gridBox-rectangle" @click="discount">
<span>打折活动</span>
<u-avatar shape="circle" size="35" :src="srcOne" customStyle="margin: -3px 5px -3px 0" />
</view>
</view>
</view>
<u-cell-group>
<u-cell title="我的关注" @click="URLto" :titleStyle="{'font-size': '16px','font-weight': '600'}"
:isLink="true"></u-cell>
<u-cell title="方案购买记录" @click="purchasedPlan" :titleStyle="{'font-size': '16px','font-weight': '600'}" :isLink="true"></u-cell>
<u-cell title="积分兑换商城" @click="integralShop" :titleStyle="{'font-size': '16px','font-weight': '600'}" :isLink="true"></u-cell>
<u-cell title="我的优惠卷" :titleStyle="{'font-size': '16px','font-weight': '600'}" :isLink="true"></u-cell>
<u-cell title="绑定手机号" :titleStyle="{'font-size': '16px','font-weight': '600'}" value="绑定送168奖门令"
:isLink="true"></u-cell>
<u-cell title="客服微信/电话" :titleStyle="{'font-size': '16px','font-weight': '600'}" value="1300200000"
:isLink="true"></u-cell>
<u-cell title="退出登录" :titleStyle="{'font-size': '16px','font-weight': '600'}" :isLink="true"></u-cell>
</u-cell-group>
</view>
<!-- <u-modal :show="popupShow" :title="签到" content='签到成功'></u-modal> -->
<u-overlay :show="popupShow" @click="popupShow = false">
<view class="warp">
<view class="rect" @tap.stop>
<u-icon name="checkmark-circle" color="#fedbc5" size="70"></u-icon>
<span style="font-size: 18px; font-weight: 600;">{{'签到成功'}}</span>
<span style="font-size: 14px; font-weight: 600; color: #c6c6c6;">{{'积分+20'}}</span>
</view>
</view>
</u-overlay>
</view>
</template>
<script setup>
import {
ref
} from 'vue'
const src = ref('https://cdn.uviewui.com/uview/album/1.jpg');
const srcOne = ref();
const popupShow = ref(false)
const {
safeAreaInsets
} = uni.getSystemInfoSync();
// 我的关注
const URLto = () => {
uni.navigateTo({
url: './compontents/attention'
});
}
// 签到
const signIn = () => {
popupShow.value = true
}
// 充值
const recharge =()=>{
uni.navigateTo({
url: './compontents/recharge'
});
}
// 打折活动
const discount = ()=>{
uni.navigateTo({
url: './compontents/discount'
});
}
// 已购方案
const purchasedPlan = ()=>{
uni.navigateTo({
url: './compontents/purchasedPlan'
});
}
// 积分商城
const integralShop = ()=>{
uni.navigateTo({
url: './compontents/integralShop'
});
}
// vip
const VIPMember = ()=>{
uni.navigateTo({
url: './compontents/VIPMember'
});
}
</script>
<style lang="scss" scoped>
.back-color {
width: 100vw;
height: 87.2vh;
background-color: #051963;
}
.userInfo {
width: 89vw;
padding: 10% 5%;
display: flex;
justify-content: space-between;
.userInfo-text {
color: #fff;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.user-img {
display: flex;
align-items: center;
}
}
.contentInfo {
width: 100vw;
height: 87%;
background-color: #fff;
border-radius: 15px 15px 0 0;
.gridBox {
width: 89.4vw;
height: 25vh;
padding: 5% 5%;
display: flex;
flex-direction: column;
justify-content: space-between;
.gridBox-top {
display: flex;
justify-content: space-between;
.gridBox-spuare {
width: 30%;
height: 14vh;
border: 1px solid #f0f0f0;
border-radius: 10rpx;
font-weight: 600;
display: flex;
justify-content: space-evenly;
align-items: center;
flex-direction: column;
}
}
.gridBox-bottom {
display: flex;
justify-content: space-between;
.gridBox-rectangle {
width: 45%;
height: 8vh;
border: 1px solid #f0f0f0;
font-size: 14px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-around;
}
}
}
}
:deep(.u-cell__value) {
font-size: 12px;
font-weight: 600;
color: #b0b0b0;
}
:deep(.u-cell-group) {
display: flex;
justify-content: center;
}
:deep(.u-cell-group__wrapper) {
width: 89vw;
}
.warp {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.rect {
width: 60%;
height: 20%;
border-radius: 10px;
background-color: #fff;
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-evenly;
}
</style>