chushih
This commit is contained in:
li
@@ -0,0 +1,261 @@
|
||||
<template>
|
||||
<view class="user">
|
||||
<view class="card">
|
||||
<view class="uid">ID:{{ userInfo.username }}</view>
|
||||
<u--image
|
||||
class="logo"
|
||||
:showLoading="true"
|
||||
:src="loginLogo"
|
||||
width="50px"
|
||||
height="auto"
|
||||
mode="widthFix"
|
||||
></u--image>
|
||||
<view class="box">
|
||||
<view class="text">{{ $lang.userBalance }}</view>
|
||||
<view class="money">{{ money }}</view>
|
||||
</view>
|
||||
<u--image
|
||||
:showLoading="false"
|
||||
:src="require('static/images/card_bg.png')"
|
||||
width="100%"
|
||||
height="auto"
|
||||
mode="widthFix"
|
||||
></u--image>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view
|
||||
class="cell"
|
||||
v-for="(item, index) in userMenu"
|
||||
:key="index"
|
||||
@click="goPath(item)"
|
||||
>
|
||||
<view class="lab">{{ item.name }}</view>
|
||||
<u-icon
|
||||
class="icon"
|
||||
name="arrow-right"
|
||||
color="#757272"
|
||||
size="16"
|
||||
></u-icon>
|
||||
</view>
|
||||
<view class="logout" @tap="modalShow = true">{{ $lang.logout }}</view>
|
||||
</view>
|
||||
<u-picker
|
||||
:title="$lang.languageSettings"
|
||||
closeOnClickOverlay
|
||||
:defaultIndex="defaultIndex"
|
||||
:show="show"
|
||||
:columns="langList"
|
||||
:cancelText="$lang.cancel"
|
||||
:confirmText="$lang.confirm"
|
||||
keyName="name"
|
||||
@close="show = false"
|
||||
@cancel="show = false"
|
||||
@confirm="confirm"
|
||||
></u-picker>
|
||||
<u-modal
|
||||
:show="modalShow"
|
||||
:title="$lang.tip"
|
||||
:confirmText="$lang.confirm"
|
||||
:cancelText="$lang.cancel"
|
||||
@confirm="confirmLogout"
|
||||
@cancel="modalShow = false"
|
||||
:showCancelButton="true"
|
||||
ref="uModal"
|
||||
:asyncClose="true"
|
||||
>
|
||||
<view style="text-align: center">{{ $lang.logoutTip }}</view>
|
||||
</u-modal>
|
||||
<view class="mb60"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
modalShow: false,
|
||||
|
||||
defaultIndex: [0],
|
||||
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.getUserMoneyData()
|
||||
},
|
||||
methods: {
|
||||
confirm(item) {
|
||||
this.$store.commit("app/updateLanguage", item.value[0].key);
|
||||
this.show = false;
|
||||
},
|
||||
goPath(item) {
|
||||
if (item.id == 0) {
|
||||
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() {
|
||||
localStorage.removeItem("userInfo");
|
||||
this.$router.replace({ path: "/" });
|
||||
},
|
||||
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 {
|
||||
background: #0b1520;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
.card {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
.uid {
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
top: 25px;
|
||||
z-index: 3;
|
||||
font-size: 14px;
|
||||
color: #573d14;
|
||||
}
|
||||
.logo {
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
top: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
.box {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
z-index: 3;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #573d14;
|
||||
text-align: center;
|
||||
.money {
|
||||
padding-left: 38px;
|
||||
padding-right: 36px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 4px;
|
||||
background: url("/static/images/balance_icon.png") no-repeat;
|
||||
background-size: 33px auto;
|
||||
background-position: left top;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content {
|
||||
margin: 20px 15px;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
.cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 16px;
|
||||
padding: 15px 10px;
|
||||
color: #deb366;
|
||||
border-bottom: 1px solid #594522;
|
||||
background: #151617;
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
.logout {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
background: #e5b932;
|
||||
font-weight: 600;
|
||||
margin: 20px auto;
|
||||
border-radius: 5px;
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user