|
|
@@ -1,10 +1,117 @@
|
|
|
<script setup lang="ts">
|
|
|
+import type { UserInfo, UserModule } from '@/model/me.ts'
|
|
|
+import avatar from '@/static/image/me/avatar.png'
|
|
|
+import consult from '@/static/image/me/consult.png'
|
|
|
+import coupon from '@/static/image/me/coupon.png'
|
|
|
+import memberShop from '@/static/image/me/memberShop.png'
|
|
|
+import ToolApi from '@/utils'
|
|
|
+
|
|
|
+const safeHeight = ToolApi.getSafeHeight()
|
|
|
+const titleName = ref<string>('我的')
|
|
|
+const userInfo = ref<UserInfo>({
|
|
|
+ age: 0,
|
|
|
+ avatar,
|
|
|
+ id: 0,
|
|
|
+ isLogin: false,
|
|
|
+ memberType: '无会员',
|
|
|
+ nickName: '请登录',
|
|
|
+})
|
|
|
+const userModules = ref<UserModule>({
|
|
|
+ couponModule: {
|
|
|
+ id: 1,
|
|
|
+ name: '优惠券',
|
|
|
+ imgUrl: coupon,
|
|
|
+ path: '',
|
|
|
+ },
|
|
|
+ memberShopModule: {
|
|
|
+ id: 2,
|
|
|
+ name: '会员商城',
|
|
|
+ imgUrl: memberShop,
|
|
|
+ path: '',
|
|
|
+ },
|
|
|
+ consultModule: {
|
|
|
+ id: 3,
|
|
|
+ name: '点我咨询',
|
|
|
+ imgUrl: consult,
|
|
|
+ path: '',
|
|
|
+ },
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <view>我的</view>
|
|
|
+ <TitleBar :title-name="titleName" />
|
|
|
+ <view class="w-full bg-[#F5F6F7]" :style="`height:calc(100vh - ${safeHeight}px)`">
|
|
|
+ <view class="me-container p-4 w-full">
|
|
|
+ <view class="me-card bg-[#FFFFFF] h-[229px] flex flex-col justify-center items-center w-full rounded-xl">
|
|
|
+ <view class="me-card-info flex flex-1 w-full border-b-1 border-[#E7E7E7] p-4 justify-between items-center">
|
|
|
+ <view class="me-card-info-login flex items-center ">
|
|
|
+ <view class="me-card-info-login-avatar mr-4">
|
|
|
+ <image :src="userInfo.avatar" alt="avatar" class="w-[64px] h-[64px] rounded-full" />
|
|
|
+ </view>
|
|
|
+ <view class="me-card-info-login-person flex flex-col justify-between h-[54px]">
|
|
|
+ <text class="text-[16px] font-bold ">
|
|
|
+ {{ userInfo.nickName }}
|
|
|
+ </text>
|
|
|
+ <view class="h-[fit-content] text-[#999999] ">
|
|
|
+ <uni-tag :text="`${userInfo.isLogin ? (`${userInfo.age}岁`) : '年龄'}`" class="mr-2" />
|
|
|
+ <uni-tag :text="userInfo.memberType" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="me-card-info-edit w-[20px] h-[20px]">
|
|
|
+ <image src="@/static/image/me/edit.png" alt="edit" class="w-full h-full" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="me-card-item flex-1 w-full py-4 grid grid-cols-3">
|
|
|
+ <view
|
|
|
+ v-for="item in userModules" :key="item.id"
|
|
|
+ class="flex justify-between items-center flex-col me-card-item-module"
|
|
|
+ >
|
|
|
+ <image :src="item.imgUrl" :alt="item.name" class="w-[48px] h-[48px]" />
|
|
|
+ <text class="text-[12px] text-[#000000]">
|
|
|
+ {{ item.name }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <uni-card spacing="0" padding="0" :border="false">
|
|
|
+ <view class="uni-body">
|
|
|
+ <uni-list :border="false">
|
|
|
+ <uni-list-item title="关于我们" show-arrow class="border-b-1 border-[#E7E7E7]" />
|
|
|
+ <uni-list-item title="设置" show-arrow />
|
|
|
+ </uni-list>
|
|
|
+ </view>
|
|
|
+ </uni-card>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
-<style scoped>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.me-card {
|
|
|
+ box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.08);
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.uni-card) {
|
|
|
+ border-radius: 12px !important;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.uni-list-item) {
|
|
|
+ height: 56px;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.uni-list-item__content-title) {
|
|
|
+ color: #000000 !important;
|
|
|
+ font-size: 16px !important;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.uni-icons) {
|
|
|
+ color: rgba(0, 0, 0, 0.4) !important;
|
|
|
+}
|
|
|
|
|
|
+:deep(.uni-tag) {
|
|
|
+ color: #999999 !important;
|
|
|
+ background: #F3F3F3 !important;
|
|
|
+ border: none !important;
|
|
|
+}
|
|
|
</style>
|
