BIGTcoins_H5/pages/accountSettings/accountSettings.vue

<template>
    <v-page>
        <!-- 头部 -->
        <v-header :title="$t('accountSettings.a0')"></v-header>

        <!-- 中间 -->
        <view class=" m-y-sm rounded-md m-x-lg overflow-hidden box-shadow">
            <view
                class="p-y-xs per-bot p-x-md h-36 border-b border-gray-7 d-flex align-center justify-between bg-panel-3 "
            >
                <span class="color-light">{{$t('accountSettings.a1')}}</span>
                <view class="d-flex align-center">
                    <van-icon name="user-circle-o" class="color-theme-1 fn-30"/>
                </view>
            </view>
            <view
                class="per-bot p-x-md p-y-md border-b border-gray-7 d-flex align-center justify-between bg-panel-3"
            >
                <span class="color-light">{{$t('accountSettings.a2')}}</span>
                <view class="d-flex align-center">
                    <span>{{user.username}}</span>
                </view>
            </view>
            <view class="per-bot p-x-md p-y-md d-flex align-center justify-between bg-panel-3">
                <span class="color-light">{{$t('accountSettings.a3')}}</span>
                <view class="d-flex align-center">
                    <span>{{user.account}}</span>
                </view>
            </view>
            <!-- #ifdef APP-PLUS -->
            <view class="per-bot p-x-md p-y-md d-flex align-center justify-between bg-panel-3">
                <span class="color-light">{{$t('common.c2')}}</span>
                <view class="d-flex align-center">
                    <span>{{versions}}</span>
                </view>
            </view>
            <!-- #endif -->
        </view>
        <view class="m-x-lg rounded-md overflow-hidden box-shadow">
            <!-- <v-link
              to="/pages/safe/phone"
              tag="div"
              class="per-bot p-x-md border-b border-gray-7 p-y-md d-flex align-center justify-between bg-panel-3 "
            >
              <span class="color-light">{{$t('accountSettings.a4')}}</span>
              <view class="d-flex align-center">
                <span class="color-right">{{user.phone}}</span>
                <span class="color-theme-1 m-l-xs" v-if="user.phone">{{$t('accountSettings.a5')}}</span>
                <span class="color-theme-1 m-l-xs" v-else>{{$t('accountSettings.a6')}}</span>
                <van-icon
                  class="p-l-xs"
                  name="arrow"
                  size="16"
                  color="#646566"
                  @click.stop
                />
              </view>
            </v-link> -->

            <v-link tag="div" to="" class="per-bot p-x-md p-y-md d-flex align-center justify-between bg-panel-3">
			<!-- /pages/safe/email -->
                <span class="color-light">{{$t('accountSettings.a7')}}</span>
                <view class="d-flex align-center">
                    <span>{{user.email}}</span>
                    <!-- <span class="color-theme-1 m-l-xs" v-if="user.email">{{$t('accountSettings.a5')}}</span>
                    <span class="color-theme-1 m-l-xs" v-else>{{$t('accountSettings.a6')}}</span>
                    <van-icon
                        class="p-l-xs"
                        name="arrow"
                        size="16"
                        color="#646566"
                        @click.stop
                    /> -->
                </view>
            </v-link>
        </view>
        <view class="m-y-sm m-x-lg overflow-hidden rounded-md box-shadow">
            <view class="per-bot p-x-md p-y-md d-flex align-center justify-between bg-panel-3">
                <view class="color-light">{{$t('accountSettings.b2')}}</view>
                <view class="d-flex align-center">
                    <v-lang/>
                    <van-icon
                        class="p-l-xs"
                        name="arrow"
                        size="16"
                        color="#646566"
                        @click.stop
                    />
                </view>
            </view>
        </view>

        <view class="m-x-lg rounded-md overflow-hidden box-shadow">
            <view
                @click="outLogin"
                class="per-bot p-x-md border-b border-gray-7 p-y-md d-flex align-center justify-between bg-panel-3 "
            >
                <span class="color-light">{{$t('accountSettings.a8')}}</span>
                <view class="d-flex align-center">
                    <van-icon
                        class="p-l-xs"
                        name="arrow"
                        size="16"
                        color="#646566"
                        @click.stop
                    />
                </view>
            </view>

            <view
                @click="loginOut"
                class="per-bot p-x-md p-y-md d-flex align-center justify-between bg-panel-3"
            >
                <span class="color-light">{{$t('accountSettings.a9')}}</span>
                <view class="d-flex align-center">
                    <van-icon
                        class="p-l-xs"
                        name="arrow"
                        size="16"
                        color="#646566"
                        @click.stop
                    />
                </view>
            </view>
        </view>

        <!-- <view class="m-t-lg p-x-md fn-center">
          <van-button
            icon="exchange"
            class="w-max fn-lg m-b-md"
            color="#f05319"
            type="info"
            block
            @click="outLogin"
          >{{$t('accountSettings.a8')}}</van-button>
          <view class="m-t-md">
            <v-button block  class="w-max color-light" plain @click="loginOut">{{$t('accountSettings.a9')}}</v-button>
          </view>
        </view> -->
    </v-page>
</template>

<script>
import app from "app.js"
import {mapState, mapGetters} from "vuex";
import Member from "@/api/member";

export default {
    data() {
        return {
            versions: app.version
        };
    },
    computed: {
        ...mapState({
            user: "user",
            version: "version",
        }),
        ...mapGetters(['themeStyle'])
    },
    mounted() {
    },
    methods: {
        changeNickname() {
            this.$router.push({path: "/changeNickname"});
        },

        // 切换用户
        outLogin() {
            uni.removeStorageSync("token");
            this._router.replace({
                path: "/pages/login/index",
                query: {
                    notLogin: 1,
                    from: '/pages/accountSettings/accountSettings',
                },
            });
        },
        // 退出登录
        loginOut() {
            let data = {
                lang: uni.getStorageSync('language') || 'en'
            };
            Member.logout(data, {toast: true})
                .then(() => {
                    this.outLogin();
                })
                .catch(() => {
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.head-account {
    font-size: 20px;
}

::v-deep .lb-picker-default-slot {
    font-size: 14px !important;
}
</style>