|
|
@@ -1,19 +1,35 @@
|
|
|
<template>
|
|
|
<ion-page>
|
|
|
<ion-content class="mine" :fullscreen="true">
|
|
|
- <img class="userInfo-bg" src="../assets/userBg.png" alt="" />
|
|
|
- <div class="userInfo" v-if="user" @click="goSetting">
|
|
|
- <van-image width="60" height="60" radius="4" :src="user.avatar"></van-image>
|
|
|
- <span class="name">
|
|
|
- <div>{{ user.nickname }}</div>
|
|
|
- <div class="id">ID: {{ user.id }}</div>
|
|
|
- </span>
|
|
|
- <img src="../assets/icon_bianji.png" class="icon" alt="" />
|
|
|
- </div>
|
|
|
- <div class="userInfo" v-else @click="goLogin">
|
|
|
- <van-image width="60" height="60" radius="4" :src="defaultAvatar"></van-image>
|
|
|
- <span class="name">{{ $t('mine.noLogin') }}</span>
|
|
|
- <img src="../assets/icon_bianji.png" class="icon" alt="" />
|
|
|
+ <div class="user-top">
|
|
|
+ <img class="userInfo-bg" src="../assets/userBg.png" alt="" />
|
|
|
+ <div class="userInfo" v-if="user" @click="goSetting">
|
|
|
+ <van-image width="60" height="60" radius="4" :src="user.avatar"></van-image>
|
|
|
+ <span class="name">
|
|
|
+ <div>{{ user.nickname }}</div>
|
|
|
+ <div class="id">ID: {{ user.id }}</div>
|
|
|
+ </span>
|
|
|
+ <img src="../assets/icon_bianji.png" class="icon" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="userInfo" v-else @click="goLogin">
|
|
|
+ <van-image width="60" height="60" radius="4" :src="defaultAvatar"></van-image>
|
|
|
+ <span class="name">{{ $t('mine.noLogin') }}</span>
|
|
|
+ <img src="../assets/icon_bianji.png" class="icon" alt="" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="wallet">
|
|
|
+ <img src="../assets/info_png_qianbao.png" alt="" class="wallet-bg" />
|
|
|
+
|
|
|
+ <div class="wallet-card">
|
|
|
+ <div class="text1">账户余额</div>
|
|
|
+ <div class="text2">
|
|
|
+ <span>{{ $t('balance.symbol') }}</span>
|
|
|
+ <span>{{ balanceText }}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="wallet-title">我的钱包</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<div class="order-card">
|
|
|
@@ -23,13 +39,13 @@
|
|
|
<span class="text2" @click="$router.push({ name: 'order' })">{{ $t('order.status.ALL') }}</span>
|
|
|
<img src="../assets/icon_inter.png" alt="" />
|
|
|
</div>
|
|
|
- <van-grid class="card-content" :border="false" :column-num="3">
|
|
|
+ <van-grid class="card-content" :border="false" :column-num="4">
|
|
|
<van-grid-item
|
|
|
:text="$t('order.status.NOT_PAID')"
|
|
|
@click="$router.push({ name: 'order', query: { status: 'NOT_PAID' } })"
|
|
|
>
|
|
|
<template #icon>
|
|
|
- <img class="grid-icon" src="../assets/info_icon_daizhidfu.png" alt="" />
|
|
|
+ <img class="grid-icon" src="../assets/svgs/info_icon_daizhidfu.svg" alt="" />
|
|
|
</template>
|
|
|
</van-grid-item>
|
|
|
|
|
|
@@ -38,7 +54,7 @@
|
|
|
@click="$router.push({ name: 'order', query: { status: 'CONFIRMED' } })"
|
|
|
>
|
|
|
<template #icon>
|
|
|
- <img class="grid-icon" src="../assets/info_icon_daiweituo.png" alt="" />
|
|
|
+ <img class="grid-icon" src="../assets/svgs/info_icon_daiweituo.svg" alt="" />
|
|
|
</template>
|
|
|
</van-grid-item>
|
|
|
|
|
|
@@ -47,12 +63,21 @@
|
|
|
@click="$router.push({ name: 'order', query: { status: 'SELLING' } })"
|
|
|
>
|
|
|
<template #icon>
|
|
|
- <img class="grid-icon" src="../assets/info_icon_weituozhong.png" alt="" />
|
|
|
+ <img class="grid-icon" src="../assets/svgs/info_icon_weituozhong.svg" alt="" />
|
|
|
+ </template>
|
|
|
+ </van-grid-item>
|
|
|
+
|
|
|
+ <van-grid-item
|
|
|
+ :text="$t('order.status.SOLD')"
|
|
|
+ @click="$router.push({ name: 'order', query: { status: 'SOLD' } })"
|
|
|
+ >
|
|
|
+ <template #icon>
|
|
|
+ <img class="grid-icon" src="../assets/svgs/info_icon_yishouchu.svg" alt="" />
|
|
|
</template>
|
|
|
</van-grid-item>
|
|
|
</van-grid>
|
|
|
</div>
|
|
|
- <div class="card-right">
|
|
|
+ <!-- <div class="card-right">
|
|
|
<div class="card-top">
|
|
|
<span class="text1" @click="$router.push({ name: 'wallet' })">{{ $t('user.wallet') }}</span>
|
|
|
</div>
|
|
|
@@ -63,10 +88,58 @@
|
|
|
</template>
|
|
|
</van-grid-item>
|
|
|
</van-grid>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="order-card">
|
|
|
+ <div class="card-left">
|
|
|
+ <div class="card-top">
|
|
|
+ <span class="text1">常用功能</span>
|
|
|
+ </div>
|
|
|
+ <van-grid class="card-content" :border="false" :column-num="4">
|
|
|
+ <van-grid-item
|
|
|
+ :text="$t('distribution.myProfit')"
|
|
|
+ @click="$router.push({ name: 'distribution' })"
|
|
|
+ >
|
|
|
+ <template #icon>
|
|
|
+ <img class="grid-icon" src="../assets/svgs/info_icon_shoyi.svg" alt="" />
|
|
|
+ </template>
|
|
|
+ </van-grid-item>
|
|
|
+
|
|
|
+ <van-grid-item :text="$t('mine.bankCard')">
|
|
|
+ <template #icon>
|
|
|
+ <img class="grid-icon" src="../assets/svgs/info_icon_ka.svg" alt="" />
|
|
|
+ </template>
|
|
|
+ </van-grid-item>
|
|
|
+
|
|
|
+ <van-grid-item :text="$t('mine.address')" @click="wait">
|
|
|
+ <template #icon>
|
|
|
+ <img class="grid-icon" src="../assets/svgs/info_icon_dizhi.svg" alt="" />
|
|
|
+ </template>
|
|
|
+ </van-grid-item>
|
|
|
+
|
|
|
+ <van-grid-item :text="$t('mine.setting')" @click="$router.push({ name: 'setting' })">
|
|
|
+ <template #icon>
|
|
|
+ <img class="grid-icon" src="../assets/svgs/info_icon_shezhi.svg" alt="" />
|
|
|
+ </template>
|
|
|
+ </van-grid-item>
|
|
|
+
|
|
|
+ <van-grid-item :text="$t('common.eula')">
|
|
|
+ <template #icon>
|
|
|
+ <img class="grid-icon" src="../assets/svgs/info_icon_pingtaixieyi.svg" alt="" />
|
|
|
+ </template>
|
|
|
+ </van-grid-item>
|
|
|
+
|
|
|
+ <van-grid-item :text="$t('common.guide')">
|
|
|
+ <template #icon>
|
|
|
+ <img class="grid-icon" src="../assets/svgs/info_icon_liucheng.svg" alt="" />
|
|
|
+ </template>
|
|
|
+ </van-grid-item>
|
|
|
+ </van-grid>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <van-cell-group class="menu" :border="false">
|
|
|
+ <!-- <van-cell-group class="menu" :border="false">
|
|
|
<van-cell
|
|
|
:title="$t('distribution.myProfit')"
|
|
|
:value="$t('mine.newProfit')"
|
|
|
@@ -109,7 +182,7 @@
|
|
|
<img src="../assets/icon_inter.png" alt="" class="right-icon" />
|
|
|
</template>
|
|
|
</van-cell>
|
|
|
- </van-cell-group>
|
|
|
+ </van-cell-group> -->
|
|
|
</ion-content>
|
|
|
</ion-page>
|
|
|
</template>
|
|
|
@@ -170,19 +243,87 @@ const balanceText = computed(() => {
|
|
|
.mine {
|
|
|
--ion-background-color: var(--ion-color-step-0);
|
|
|
}
|
|
|
+
|
|
|
+.user-top {
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ .wallet {
|
|
|
+ position: absolute;
|
|
|
+ left: 16px;
|
|
|
+ right: 16px;
|
|
|
+ bottom: -8px;
|
|
|
+ .wallet-bg {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .wallet-card {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ padding: 10px 14px;
|
|
|
+
|
|
|
+ .text1 {
|
|
|
+ font-size: 12px;
|
|
|
+ color: rgba(255, 255, 255, 0.6);
|
|
|
+ line-height: 17px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text2 {
|
|
|
+ .f();
|
|
|
+ align-items: flex-end;
|
|
|
+ margin-top: 4px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ &:nth-child(1) {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Roboto-Bold, Roboto;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(2) {
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: Roboto-Bold, Roboto;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 20px;
|
|
|
+ margin-left: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .wallet-title {
|
|
|
+ position: absolute;
|
|
|
+ right: 2px;
|
|
|
+ top: 2px;
|
|
|
+ font-size: 10px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 10px;
|
|
|
+ background: #469cff;
|
|
|
+ box-shadow: -1px 1px 4px 0px #6983f0;
|
|
|
+ border-radius: 0px 4px 0px 4px;
|
|
|
+ padding: 4px 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
.userInfo-bg {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
width: 100%;
|
|
|
display: block;
|
|
|
z-index: 0;
|
|
|
}
|
|
|
.userInfo {
|
|
|
- position: relative;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
z-index: 1;
|
|
|
- padding: 46px 16px 36px;
|
|
|
+ padding: 46px 16px 30px;
|
|
|
.f();
|
|
|
.icon {
|
|
|
width: 24px;
|
|
|
@@ -205,20 +346,19 @@ const balanceText = computed(() => {
|
|
|
}
|
|
|
|
|
|
.order-card {
|
|
|
- background: var(--ion-background-color);
|
|
|
- box-shadow: 0px 4px 8px 0px rgba(var(--ion-color-light-contrast-rgb), 0.04);
|
|
|
+ background: var(--ion-color-step-50);
|
|
|
border-radius: 4px;
|
|
|
position: relative;
|
|
|
z-index: 1;
|
|
|
- margin: 0 16px;
|
|
|
- padding: 12px;
|
|
|
+ margin: 16px 16px;
|
|
|
.f();
|
|
|
.card-left {
|
|
|
- width: 75%;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
|
|
|
.card-top {
|
|
|
.f();
|
|
|
+ padding: 12px 14px 0;
|
|
|
.text1 {
|
|
|
font-size: 14px;
|
|
|
font-weight: bold;
|
|
|
@@ -228,7 +368,7 @@ const balanceText = computed(() => {
|
|
|
}
|
|
|
.text2 {
|
|
|
font-size: 12px;
|
|
|
- color: var(--ion-color-step-200);
|
|
|
+ color: var(--ion-color-step-350);
|
|
|
line-height: 24px;
|
|
|
}
|
|
|
|
|
|
@@ -239,7 +379,6 @@ const balanceText = computed(() => {
|
|
|
}
|
|
|
|
|
|
.card-content {
|
|
|
- margin-top: 8px;
|
|
|
border-radius: 4px;
|
|
|
overflow: hidden;
|
|
|
--van-grid-item-content-background: rgba(var(--ion-color-danger-rgb), 0.04);
|
|
|
@@ -252,8 +391,8 @@ const balanceText = computed(() => {
|
|
|
}
|
|
|
|
|
|
:deep(.van-grid) {
|
|
|
- --van-grid-item-text-color: var(--ion-color-step-600);
|
|
|
- --van-grid-item-content-padding: 9px 8px;
|
|
|
+ --van-grid-item-text-color: var(--ion-color-step-350);
|
|
|
+ --van-grid-item-content-padding: 16px 8px;
|
|
|
|
|
|
.van-grid-item__text {
|
|
|
line-height: 17px;
|
