648 lines
15 KiB
Vue
648 lines
15 KiB
Vue
<template>
|
|
<view class="user">
|
|
<view class="hero">
|
|
<view class="card">
|
|
<view class="card-sheen"></view>
|
|
<view class="card-orb"></view>
|
|
<view class="card-grid"></view>
|
|
<view class="card-head">
|
|
<view class="uid">ID:{{ userInfo.username }}</view>
|
|
<view class="logo-shell">
|
|
<u--image
|
|
class="logo"
|
|
:showLoading="true"
|
|
:src="loginLogo"
|
|
width="42px"
|
|
height="42px"
|
|
mode="scaleToFill"
|
|
></u--image>
|
|
</view>
|
|
</view>
|
|
<view class="box">
|
|
<view class="text">{{ $lang.userBalance }}</view>
|
|
<view class="money-row">
|
|
<view class="money-icon"></view>
|
|
<view class="money">{{ money }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content">
|
|
<view class="section-title">{{ $lang.tip }}</view>
|
|
<view class="menu-panel">
|
|
<view
|
|
class="cell"
|
|
v-for="(item, index) in userMenu"
|
|
:key="index"
|
|
@click="goPath(item)"
|
|
>
|
|
<view class="cell-left">
|
|
<view class="cell-dot"></view>
|
|
<view class="lab">{{ item.name }}</view>
|
|
</view>
|
|
<u-icon
|
|
class="icon"
|
|
name="arrow-right"
|
|
color="#b9aa84"
|
|
size="16"
|
|
></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="logout" @tap="modalShow = true">{{ $lang.logout }}</view>
|
|
</view>
|
|
<u-popup
|
|
:show="show"
|
|
mode="bottom"
|
|
round="20"
|
|
closeOnClickOverlay
|
|
@close="closeLangPopup"
|
|
>
|
|
<view class="lang-popup">
|
|
<view class="popup-header">
|
|
<view class="popup-action cancel" @click="closeLangPopup">{{
|
|
$lang.cancel
|
|
}}</view>
|
|
<view class="popup-title">{{ $lang.languageSettings }}</view>
|
|
<view class="popup-action confirm" @click="confirmLanguageSelection">{{
|
|
$lang.confirm
|
|
}}</view>
|
|
</view>
|
|
<scroll-view scroll-y class="popup-list">
|
|
<view
|
|
class="popup-item"
|
|
:class="{ active: tempLanguageKey === item.key }"
|
|
v-for="item in langList[0]"
|
|
:key="item.key"
|
|
@click="tempLanguageKey = item.key"
|
|
>
|
|
<text>{{ item.name }}</text>
|
|
<u-icon
|
|
v-if="tempLanguageKey === item.key"
|
|
name="checkmark"
|
|
color="#231705"
|
|
size="16"
|
|
></u-icon>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</u-popup>
|
|
<u-popup :show="modalShow" mode="center" round="20" @close="closeLogoutModal">
|
|
<view class="logout-modal">
|
|
<view class="logout-title">{{ $lang.tip }}</view>
|
|
<view class="logout-text">{{ $lang.logoutTip }}</view>
|
|
<view class="logout-actions">
|
|
<view class="logout-btn logout-btn-cancel" @click="closeLogoutModal">{{
|
|
$lang.cancel
|
|
}}</view>
|
|
<view class="logout-btn logout-btn-confirm" @click="confirmLogout">{{
|
|
$lang.confirm
|
|
}}</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
<view class="mb60"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from "vuex";
|
|
export default {
|
|
data() {
|
|
return {
|
|
show: false,
|
|
modalShow: false,
|
|
|
|
defaultIndex: [0],
|
|
tempLanguageKey: "cn",
|
|
langList: [
|
|
[
|
|
{ key: "en", name: "English" },
|
|
{ key: "tw", name: "繁體中文" },
|
|
{ key: "cn", name: "简体中文" },
|
|
{ key: "yn", name: "Việt nam" },
|
|
{ key: "kr", name: "한국어" },
|
|
{ key: "tl", name: "แบบไทย" },
|
|
{ key: "in", name: "Indonesia" },
|
|
],
|
|
],
|
|
money:0
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
userInfo: (state) => state.app.userInfo,
|
|
language: (state) => state.app.language,
|
|
$lang: (state) => state.app.lang[state.app.language],
|
|
loginLogo: (state) => state.app.loginLogo,
|
|
userMenu: (state) => {
|
|
let list = [];
|
|
const lang = state.app.lang[state.app.language];
|
|
const userInfo = state.app.userInfo;
|
|
if (userInfo.pay_channel) {
|
|
list = lang.userMenu.filter(
|
|
(v) => v.id != 1
|
|
);
|
|
} else {
|
|
list = lang.userMenu.filter(
|
|
(v) => v.id != 1 && v.id != 2 && v.id != 4 && v.id != 5
|
|
);
|
|
}
|
|
return list;
|
|
},
|
|
}),
|
|
},
|
|
onLoad() {
|
|
this.langList[0].forEach((v, i) => {
|
|
if (v.key == this.language) {
|
|
this.defaultIndex = [i];
|
|
}
|
|
});
|
|
this.tempLanguageKey = this.language;
|
|
this.getUserMoneyData()
|
|
},
|
|
methods: {
|
|
confirm(item) {
|
|
this.$store.commit("app/updateLanguage", item.value[0].key);
|
|
this.show = false;
|
|
},
|
|
closeLangPopup() {
|
|
this.tempLanguageKey = this.language;
|
|
this.show = false;
|
|
},
|
|
confirmLanguageSelection() {
|
|
if (this.tempLanguageKey) {
|
|
this.$store.commit("app/updateLanguage", this.tempLanguageKey);
|
|
}
|
|
this.show = false;
|
|
},
|
|
closeLogoutModal() {
|
|
this.modalShow = false;
|
|
},
|
|
goPath(item) {
|
|
if (item.id == 0) {
|
|
this.tempLanguageKey = this.language;
|
|
this.show = true;
|
|
} else if (item.id == 4 || item.id == 5 || item.id == 6) {
|
|
uni.switchTab({
|
|
url: item.path,
|
|
});
|
|
} else {
|
|
if (this.userInfo.is_sw == 1) {
|
|
this.$toast({
|
|
message: this.$lang.is_sw,
|
|
duration: 2000,
|
|
});
|
|
} else {
|
|
uni.navigateTo({
|
|
url: item.path,
|
|
});
|
|
}
|
|
}
|
|
},
|
|
confirmLogout() {
|
|
this.modalShow = false;
|
|
localStorage.removeItem("userInfo");
|
|
localStorage.removeItem("uni_id_token");
|
|
sessionStorage.clear();
|
|
const backSteps = window.history.length - 1;
|
|
window.history.go(-backSteps);
|
|
setTimeout(() => { window.location.replace("/"); }, 200);
|
|
},
|
|
getUserMoneyData() {
|
|
var that = this
|
|
const params = {
|
|
user_id: this.userInfo.id,
|
|
api_token: this.userInfo.api_token,
|
|
};
|
|
this.$api['getUserMoney'](params)
|
|
.then((res) => {
|
|
if (res.Success) {
|
|
that.money = parseFloat(res.Data.money).toFixed(2)
|
|
} else {
|
|
this.$toast({
|
|
message: res.Msg,
|
|
duration: 2000,
|
|
});
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.user {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
background: linear-gradient(180deg, #060505 0%, #0d0b09 100%);
|
|
color: #f7ecd0;
|
|
|
|
.hero {
|
|
padding: 14px 12px 0;
|
|
}
|
|
|
|
.card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 28px;
|
|
min-height: 188px;
|
|
border: 1px solid rgba(226, 193, 117, 0.22);
|
|
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24),
|
|
inset 0 1px 0 rgba(255, 245, 223, 0.08);
|
|
background: linear-gradient(
|
|
180deg,
|
|
#f1d488 0%,
|
|
#ddaf4e 42%,
|
|
#c78f28 100%
|
|
);
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(255, 255, 255, 0.2) 0%,
|
|
rgba(255, 255, 255, 0.04) 26%,
|
|
rgba(133, 88, 16, 0.08) 60%,
|
|
rgba(78, 50, 8, 0.18) 100%
|
|
);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.card-sheen {
|
|
position: absolute;
|
|
top: -22px;
|
|
right: -36px;
|
|
width: 180px;
|
|
height: 180px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(
|
|
circle,
|
|
rgba(255, 247, 218, 0.34) 0%,
|
|
rgba(255, 247, 218, 0.06) 46%,
|
|
rgba(255, 247, 218, 0) 74%
|
|
);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.card-orb {
|
|
position: absolute;
|
|
left: -34px;
|
|
bottom: -48px;
|
|
width: 150px;
|
|
height: 150px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(
|
|
circle,
|
|
rgba(169, 107, 20, 0.24) 0%,
|
|
rgba(169, 107, 20, 0.08) 45%,
|
|
rgba(169, 107, 20, 0) 76%
|
|
);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.card-grid {
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image: linear-gradient(
|
|
135deg,
|
|
rgba(255, 241, 204, 0.14) 12%,
|
|
transparent 12%,
|
|
transparent 50%,
|
|
rgba(160, 107, 22, 0.08) 50%,
|
|
rgba(160, 107, 22, 0.08) 62%,
|
|
transparent 62%
|
|
),
|
|
linear-gradient(
|
|
28deg,
|
|
rgba(255, 247, 228, 0.08) 14%,
|
|
transparent 14%,
|
|
transparent 56%,
|
|
rgba(149, 98, 21, 0.08) 56%,
|
|
rgba(149, 98, 21, 0.08) 70%,
|
|
transparent 70%
|
|
);
|
|
background-size: 180px 180px, 220px 220px;
|
|
opacity: 0.7;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.card-head {
|
|
position: absolute;
|
|
top: 16px;
|
|
left: 16px;
|
|
right: 16px;
|
|
z-index: 3;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.uid {
|
|
max-width: calc(100% - 82px);
|
|
padding: 8px 14px;
|
|
border-radius: 999px;
|
|
background: rgba(84, 64, 25, 0.38);
|
|
border: 1px solid rgba(113, 82, 24, 0.12);
|
|
color: rgba(92, 61, 12, 0.92);
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.logo-shell {
|
|
width: 52px;
|
|
height: 52px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 16px;
|
|
background: rgba(255, 247, 224, 0.12);
|
|
border: 1px solid rgba(115, 81, 18, 0.1);
|
|
backdrop-filter: blur(2px);
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
|
|
}
|
|
|
|
.logo {
|
|
z-index: 3;
|
|
opacity: 0.96;
|
|
border-radius: 14px;
|
|
}
|
|
|
|
.box {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 55%;
|
|
z-index: 3;
|
|
transform: translate(-50%, -50%);
|
|
width: calc(100% - 52px);
|
|
text-align: center;
|
|
color: #5d4312;
|
|
|
|
.text {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.2px;
|
|
}
|
|
|
|
.money-row {
|
|
width: fit-content;
|
|
max-width: 100%;
|
|
margin: 10px auto 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.money-icon {
|
|
width: 28px;
|
|
height: 28px;
|
|
flex-shrink: 0;
|
|
background: url("/static/images/balance_icon.png") no-repeat;
|
|
background-size: 28px auto;
|
|
background-position: center;
|
|
}
|
|
|
|
.money {
|
|
padding: 0;
|
|
font-size: 30px;
|
|
font-weight: 700;
|
|
line-height: 1.1;
|
|
white-space: nowrap;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
margin: 18px 12px 0;
|
|
|
|
.section-title {
|
|
margin: 0 2px 12px;
|
|
font-size: 13px;
|
|
color: #a9956d;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
|
|
.menu-panel {
|
|
border-radius: 24px;
|
|
overflow: hidden;
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(16, 13, 11, 0.96) 0%,
|
|
rgba(10, 8, 7, 0.96) 100%
|
|
);
|
|
border: 1px solid rgba(223, 189, 120, 0.12);
|
|
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18),
|
|
inset 0 1px 0 rgba(255, 245, 223, 0.03);
|
|
}
|
|
|
|
.cell {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
min-height: 58px;
|
|
padding: 0 16px;
|
|
color: #e1c483;
|
|
border-bottom: 1px solid rgba(223, 189, 120, 0.08);
|
|
background: rgba(19, 17, 15, 0.82);
|
|
|
|
&:active {
|
|
opacity: 0.82;
|
|
}
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.cell-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.cell-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(180deg, #f2dfb6 0%, #dfbd78 52%, #bd8d39 100%);
|
|
box-shadow: 0 0 0 4px rgba(223, 189, 120, 0.06);
|
|
}
|
|
|
|
.lab {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: #e0c283;
|
|
}
|
|
|
|
.icon {
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
|
|
.logout {
|
|
width: 100%;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
text-align: center;
|
|
font-size: 15px;
|
|
color: #231705;
|
|
background: linear-gradient(180deg, #f2dfb6 0%, #dfbd78 52%, #bd8d39 100%);
|
|
font-weight: 700;
|
|
letter-spacing: 0.3px;
|
|
margin: 18px auto 0;
|
|
border-radius: 16px;
|
|
box-shadow: 0 12px 24px rgba(125, 84, 22, 0.18),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.36);
|
|
|
|
&:active {
|
|
opacity: 0.86;
|
|
}
|
|
}
|
|
}
|
|
|
|
.lang-popup {
|
|
background: linear-gradient(180deg, #17130f 0%, #0d0b09 100%);
|
|
border-top: 1px solid rgba(223, 189, 120, 0.14);
|
|
border-radius: 20px 20px 0 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.popup-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 54px;
|
|
padding: 0 16px;
|
|
border-bottom: 1px solid rgba(223, 189, 120, 0.1);
|
|
background: rgba(21, 18, 15, 0.96);
|
|
}
|
|
|
|
.popup-title {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: #f4dfae;
|
|
}
|
|
|
|
.popup-action {
|
|
min-width: 52px;
|
|
font-size: 14px;
|
|
line-height: 1;
|
|
|
|
&.cancel {
|
|
color: #a9956d;
|
|
text-align: left;
|
|
}
|
|
|
|
&.confirm {
|
|
color: #dfbd78;
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
.popup-list {
|
|
max-height: 50vh;
|
|
padding: 10px 12px calc(18px + env(safe-area-inset-bottom));
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.popup-item {
|
|
min-height: 48px;
|
|
padding: 0 14px;
|
|
margin-bottom: 10px;
|
|
border-radius: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
color: #d9c6a0;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(25, 21, 18, 0.96) 0%,
|
|
rgba(17, 14, 12, 0.96) 100%
|
|
);
|
|
border: 1px solid rgba(223, 189, 120, 0.12);
|
|
box-shadow: inset 0 1px 0 rgba(255, 244, 220, 0.03);
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&.active {
|
|
color: #231705;
|
|
background: linear-gradient(180deg, #f2dfb6 0%, #dfbd78 52%, #bd8d39 100%);
|
|
border-color: rgba(242, 223, 182, 0.45);
|
|
box-shadow: 0 10px 20px rgba(125, 84, 22, 0.16),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.28);
|
|
}
|
|
}
|
|
|
|
.logout-modal {
|
|
width: 620rpx;
|
|
padding: 34rpx 34rpx 28rpx;
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(20, 16, 12, 0.98) 0%,
|
|
rgba(11, 9, 7, 0.98) 100%
|
|
);
|
|
border: 1rpx solid rgba(223, 189, 120, 0.18);
|
|
border-radius: 20rpx;
|
|
box-sizing: border-box;
|
|
box-shadow: 0 24rpx 60rpx rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.logout-title {
|
|
text-align: center;
|
|
font-size: 30rpx;
|
|
font-weight: 700;
|
|
color: #f4dfae;
|
|
}
|
|
|
|
.logout-text {
|
|
margin-top: 18rpx;
|
|
color: #d9c6a0;
|
|
font-size: 24rpx;
|
|
line-height: 1.7;
|
|
text-align: center;
|
|
}
|
|
|
|
.logout-actions {
|
|
display: flex;
|
|
gap: 16rpx;
|
|
margin-top: 28rpx;
|
|
}
|
|
|
|
.logout-btn {
|
|
flex: 1;
|
|
height: 78rpx;
|
|
border-radius: 14rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 26rpx;
|
|
font-weight: 700;
|
|
|
|
&.logout-btn-cancel {
|
|
color: #d9c6a0;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1rpx solid rgba(223, 189, 120, 0.12);
|
|
}
|
|
|
|
&.logout-btn-confirm {
|
|
color: #231705;
|
|
background: linear-gradient(180deg, #f2dfb6 0%, #dfbd78 52%, #bd8d39 100%);
|
|
box-shadow: 0 10rpx 20rpx rgba(125, 84, 22, 0.16),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.28);
|
|
}
|
|
}
|
|
}
|
|
</style>
|