You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
250 lines
7.3 KiB
250 lines
7.3 KiB
<template>
|
|
<view class="user-view p-page">
|
|
<u-navbar :placeholder="true" :bg-color="uNavbarBgColor" left-icon="">
|
|
<view slot="left">
|
|
<text
|
|
class="fw-bold"
|
|
:style="{ color: uNavbarTitleColor, fontSize: '22px' }"
|
|
>我的</text
|
|
>
|
|
</view>
|
|
<view slot="right" class="u-flex">
|
|
<u-icon
|
|
name="setting"
|
|
:size="30"
|
|
:color="uNavbarIconColor"
|
|
class="mx-sm"
|
|
></u-icon>
|
|
<u-icon
|
|
name="question-circle"
|
|
:size="30"
|
|
:color="uNavbarIconColor"
|
|
class="mx-sm"
|
|
></u-icon>
|
|
</view>
|
|
</u-navbar>
|
|
|
|
<view class="mt-base u-flex-y-center">
|
|
<u-avatar :size="65" @tap="handleToLogin"></u-avatar>
|
|
<view class="ms-base">
|
|
<view @tap="handleToLogin">
|
|
<text class="text-white fw-bold" :style="{ fontSize: '24px' }">{{
|
|
auth.name || "未登录"
|
|
}}</text>
|
|
</view>
|
|
<view class="mt-base">
|
|
<text class="text-white">便捷出行就在12306</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="mt-llg page-box">
|
|
<view class="pt-base px-base">
|
|
<u-text text="当前出行" :size="18" :bold="true"> TODO </u-text>
|
|
</view>
|
|
<NextTicketVue ref="NextTicketVue" v-if="auth.id"></NextTicketVue>
|
|
<view v-else class="py-llg u-flex-xy-center">
|
|
<view>
|
|
<u-button type="primary" size="small" @tap="handleToLogin"
|
|
>去登录</u-button
|
|
>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="auth.id" class="mt-base page-box">
|
|
<u-cell-group>
|
|
<u-cell title="身份证号" :label="auth.idCardNo | hideIdCardNo"></u-cell>
|
|
<u-cell title="手机号" :label="auth.mobileNo | hideMobileNo"></u-cell>
|
|
<u-cell
|
|
title="银行卡号"
|
|
:label="auth.bankCardNo | hideBankCardNo"
|
|
></u-cell>
|
|
</u-cell-group>
|
|
</view>
|
|
|
|
<!--
|
|
<view class="mt-base page-box u-flex-y-center">
|
|
<view class="u-flex-grow grid-item">
|
|
<u-image
|
|
src="@/static/img_chengcheren.png"
|
|
height="36px"
|
|
width="36px"
|
|
></u-image>
|
|
<view class="grid-item-text">乘车人</view>
|
|
</view>
|
|
<u-line direction="col" length="26px"></u-line>
|
|
<view class="u-flex-grow grid-item">
|
|
<u-image
|
|
src="@/static/img_dingdan.png"
|
|
height="36px"
|
|
width="36px"
|
|
></u-image>
|
|
<view class="grid-item-text">我的订单</view>
|
|
</view>
|
|
<u-line direction="col" length="26px"></u-line>
|
|
<view class="u-flex-grow grid-item">
|
|
<u-image
|
|
src="@/static/img_youhuiquan.png"
|
|
height="36px"
|
|
width="36px"
|
|
></u-image>
|
|
<view class="grid-item-text">优惠券</view>
|
|
</view>
|
|
</view>
|
|
-->
|
|
|
|
<!--
|
|
<view class="page-box">
|
|
<view class="px-base py-lg">
|
|
<u-text text="出行向导" :size="18" :bold="true"></u-text>
|
|
</view>
|
|
<u-line></u-line>
|
|
<u-grid :border="false" :col="4">
|
|
<u-grid-item v-for="item in PAGE_MENU_1" :key="item.label">
|
|
<view class="grid-item">
|
|
<u-image :src="item.image" height="30px" width="30px"></u-image>
|
|
<view class="grid-item-text">{{ item.label }}</view>
|
|
</view>
|
|
</u-grid-item>
|
|
</u-grid>
|
|
</view>
|
|
-->
|
|
|
|
<!--
|
|
<view class="page-box">
|
|
<view class="px-base py-lg">
|
|
<u-text text="温馨服务" :size="18" :bold="true"></u-text>
|
|
</view>
|
|
<u-line></u-line>
|
|
<u-grid :border="false" :col="4">
|
|
<u-grid-item v-for="item in PAGE_MENU_2" :key="item.label">
|
|
<view class="grid-item">
|
|
<u-image :src="item.image" height="30px" width="30px"></u-image>
|
|
<view class="grid-item-text">{{ item.label }}</view>
|
|
</view>
|
|
</u-grid-item>
|
|
</u-grid>
|
|
</view>
|
|
-->
|
|
|
|
<!--
|
|
<view class="page-box">
|
|
<view class="px-base py-lg">
|
|
<u-text text="信息服务" :size="18" :bold="true"></u-text>
|
|
</view>
|
|
<u-cell-group>
|
|
<u-cell title="公告" size="large" :is-link="true"></u-cell>
|
|
<u-cell title="常见问题" size="large" :is-link="true"></u-cell>
|
|
<u-cell title="使用须知" size="large" :is-link="true"></u-cell>
|
|
<u-cell title="服务规章" size="large" :is-link="true"></u-cell>
|
|
<u-cell title="铁路保险" size="large" :is-link="true"></u-cell>
|
|
<u-cell
|
|
title="关于"
|
|
size="large"
|
|
:is-link="true"
|
|
:border="false"
|
|
></u-cell>
|
|
</u-cell-group>
|
|
</view>
|
|
-->
|
|
|
|
<view :style="{ height: '25vh' }"></view>
|
|
|
|
<view v-if="auth.id" class="mt-base">
|
|
<u-button type="error" @tap="handleLogout">退出登录</u-button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapActions, mapState } from "vuex";
|
|
import uNavbarOpacity from "@/utils/mixins/u-navbar-opacity";
|
|
import NextTicketVue from "./NextTicket.vue";
|
|
|
|
const PAGE_MENU_1 = [
|
|
{ label: "车站大屏", image: require("@/static/icon_chezhandaping.png") },
|
|
{ label: "时刻表", image: require("@/static/icon_shikebiao.png") },
|
|
{ label: "起售时间", image: require("@/static/icon_qishoushijian.png") },
|
|
{
|
|
label: "正晚点查询",
|
|
image: require("@/static/icon_zhengwandianchaxun.png"),
|
|
},
|
|
{ label: "票价查询", image: require("@/static/icon_piaojiachaxun.png") },
|
|
{ label: "换乘时间", image: require("@/static/icon_huanchengshijian.png") },
|
|
{
|
|
label: "代售点查询",
|
|
image: require("@/static/icon_daishoudianchaxun.png"),
|
|
},
|
|
{ label: "更多", image: require("@/static/icon_gengduo.png") },
|
|
];
|
|
|
|
const PAGE_MENU_2 = [
|
|
{
|
|
label: "临时身份证明",
|
|
image: require("@/static/icon_linshishenfenzhengming.png"),
|
|
},
|
|
{ label: "遗失物品", image: require("@/static/icon_yishiwupin.png") },
|
|
{ label: "建议", image: require("@/static/icon_jianyi.png") },
|
|
{ label: "投诉", image: require("@/static/icon_tousu.png") },
|
|
{ label: "重点旅客", image: require("@/static/icon_zhongdianlvke.png") },
|
|
{ label: "客服电话", image: require("@/static/icon_kefudianhua.png") },
|
|
{ label: "希望工程", image: require("@/static/icon_xiwanggongcheng.png") },
|
|
{
|
|
label: "外国商务人员",
|
|
image: require("@/static/icon_waiguoshangwurenyuan.png"),
|
|
},
|
|
];
|
|
|
|
export default {
|
|
mixins: [uNavbarOpacity],
|
|
components: { NextTicketVue },
|
|
data() {
|
|
return {
|
|
PAGE_MENU_1,
|
|
PAGE_MENU_2,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState({ auth: "auth" }),
|
|
},
|
|
onShow() {
|
|
// 组件没有 onShow 周期，需要通过页面的 onShow 周期确保每次访问本页面都刷新 nextTicket
|
|
if (this.$refs.NextTicketVue) this.$refs.NextTicketVue.loadMyTickets();
|
|
},
|
|
methods: {
|
|
...mapActions({ revertAuth: "revertAuth" }),
|
|
handleToLogin() {
|
|
if (this.auth.id) return;
|
|
uni.navigateTo({ url: "/pages/LoginView/LoginView" });
|
|
},
|
|
handleLogout() {
|
|
this.revertAuth();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.user-view {
|
|
background: linear-gradient(
|
|
var(--color-app-blue) 0 100px,
|
|
250px,
|
|
var(--color-background) 400px
|
|
);
|
|
}
|
|
|
|
.grid-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: var(--space-llg) var(--space-ssm);
|
|
}
|
|
|
|
.grid-item-text {
|
|
margin-top: var(--space-sm);
|
|
font-size: 13px;
|
|
white-space: nowrap;
|
|
}
|
|
</style>
|