216 lines
7.3 KiB
Vue
216 lines
7.3 KiB
Vue
<template>
|
|
<!-- 顶部导航 -->
|
|
<wd-config-provider theme="dark">
|
|
<wd-navbar title="我的" safeAreaInsetTop :bordered="false">
|
|
<template #right>
|
|
<navigator hover-class="navigator-hover">
|
|
<view
|
|
class="flex items-center rounded-full h-44rpx bg-color-theme py-1 px-2 text-black"
|
|
@click="editUserInfo"
|
|
>
|
|
<uni-icons type="auth" size="20" color="#333"></uni-icons>
|
|
<text class="text-sm">编辑资料</text>
|
|
</view>
|
|
</navigator>
|
|
</template>
|
|
</wd-navbar>
|
|
|
|
<scroll-view class="h-[calc(100vh-144rpx)]" scroll-y>
|
|
<!-- 个人信息 -->
|
|
<view class="flex items-center p-6">
|
|
<image
|
|
:src="userInfo.avatar"
|
|
class="mr-4 size-100px rounded-full bg-#333 border border-amber border-solid"
|
|
mode="aspectFill"
|
|
/>
|
|
<view class="flex-1">
|
|
<view class="mb-1 text-base">{{ userInfo.nickname }}</view>
|
|
<view class="mb-2 text-xs text-#ffffff80">ID: {{ userInfo.id }}</view>
|
|
<text class="bg-#333 text-color-theme-dark text-xs px-2 py-1 rounded-1 truncate">
|
|
{{ userCity?.t || '' }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 我喜欢和钱包 -->
|
|
<view class="flex justify-around my-4 text-base">
|
|
<view class="flex flex-col items-center" @click="goLike(0)">
|
|
<text class="text-color-theme font-600 text-lg">{{ 1 }}</text>
|
|
<text class="text-color-theme text-xs">我喜欢</text>
|
|
</view>
|
|
<view class="flex flex-col items-center" @click="goLike(1)">
|
|
<text class="text-color-theme font-600 text-lg">{{ 2 }}</text>
|
|
<text class="text-color-theme text-xs">喜欢我</text>
|
|
</view>
|
|
<view class="flex flex-col items-center">
|
|
<text class="text-color-theme font-600 text-lg">{{ 3 }}</text>
|
|
<text class="text-color-theme text-xs">钱包</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 开通vip -->
|
|
<view
|
|
class="text-color-theme-dark mx-4 p-3 rounded-2 bg-#000 b-4 b-solid b-t-#ffcd32/80 b-l-#ffcd32/60 b-r-#ffcd32/60 b-b-#ffcd32/40 flex justify-between"
|
|
>
|
|
<view class="font-900 font-italic text-lg">VIP</view>
|
|
<view class="flex items-center">
|
|
<text class="text-xs">尊享vip免费特权</text>
|
|
<navigator
|
|
url="/pages/profile/apply-vip"
|
|
open-type="navigate"
|
|
hover-class="navigator-hover"
|
|
>
|
|
<text class="ml-2 px-2 py-1 rounded-full text-sm bg-color-theme text-black">
|
|
立即开通
|
|
</text>
|
|
</navigator>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 用户相册 -->
|
|
<user-ablum :ablumList="ablumList"></user-ablum>
|
|
|
|
<!-- 菜单 -->
|
|
<view class="mt-4 mx-1">
|
|
<wd-cell-group>
|
|
<wd-cell
|
|
v-for="(item, index) in MenuCellList"
|
|
:key="index"
|
|
:title="item.title"
|
|
:value="item.value"
|
|
icon-size="24"
|
|
:icon="item.icon"
|
|
is-link
|
|
ellipsis
|
|
:to="item.to"
|
|
@click="item.click"
|
|
/>
|
|
</wd-cell-group>
|
|
</view>
|
|
<view
|
|
class="mt-40rpx rounded-full bg-color-theme-dark text-base text-center py-2 mx-8 active:bg-color-theme"
|
|
@click="handleLogout"
|
|
>
|
|
退 出 登 录
|
|
</view>
|
|
<view class="h-100rpx"></view>
|
|
</scroll-view>
|
|
|
|
<wd-message-box />
|
|
<wd-popup
|
|
v-model="myEvaluationShow"
|
|
custom-style="border-radius:32rpx;"
|
|
closable
|
|
:safe-area-inset-bottom="true"
|
|
>
|
|
<view class="w-90vw h-400rpx flex-col-center gap-4 flex-wrap">
|
|
<view class="text-color-theme text-lg">我的评价</view>
|
|
<view class="w-90% flex justify-around">
|
|
<view class="bg-color-theme-dark flex items-center p-1 rounded-1">
|
|
<text class="mr-2 text-xs">身材</text>
|
|
<wd-rate v-model="myEvaluation.a" readonly />
|
|
</view>
|
|
<view class="bg-color-theme-dark flex items-center p-1 rounded-1">
|
|
<text class="mr-2 text-xs">颜值</text>
|
|
<wd-rate v-model="myEvaluation.a" readonly />
|
|
</view>
|
|
</view>
|
|
<view class="w-90% flex justify-around">
|
|
<view class="bg-color-theme-dark flex items-center p-1 rounded-1">
|
|
<text class="mr-2 text-xs">有趣</text>
|
|
<wd-rate v-model="myEvaluation.a" readonly />
|
|
</view>
|
|
<view class="bg-color-theme-dark flex items-center p-1 rounded-1">
|
|
<text class="mr-2 text-xs">耐心</text>
|
|
<wd-rate v-model="myEvaluation.a" readonly />
|
|
</view>
|
|
</view>
|
|
<view class="text-color-theme text-lg">综合评分 1.0</view>
|
|
</view>
|
|
</wd-popup>
|
|
<wd-curtain
|
|
v-model="curtainShow"
|
|
src="https://img20.360buyimg.com/da/jfs/t1/141592/25/8861/261559/5f68d8c1E33ed78ab/698ad655bfcfbaed.png"
|
|
close-position="top-right"
|
|
:width="300"
|
|
close-on-click-modal
|
|
show-menu-by-longpress
|
|
/>
|
|
</wd-config-provider>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, reactive, ref } from 'vue';
|
|
import UserAblum from './components/user-ablum.vue';
|
|
import useAblum from './use-ablum';
|
|
// @ts-ignore
|
|
import sheep from '@/sheep';
|
|
import { useMessage } from '@/uni_modules/wot-design-uni';
|
|
import RecentApi from '@/sheep/api/member/recent';
|
|
|
|
const message = useMessage();
|
|
const { ablumList } = useAblum();
|
|
|
|
const userCity = computed(() => sheep.$store('user').userCity);
|
|
const myEvaluationShow = ref(false); // 我的评价弹窗
|
|
// 我的评价数据
|
|
const myEvaluation = reactive({
|
|
a: 0,
|
|
});
|
|
const curtainShow = ref(false); // 关注公众号弹窗
|
|
const userInfo = computed(() => sheep.$store('user').userInfo);
|
|
|
|
// 修改用户信息
|
|
const editUserInfo = () => {
|
|
uni.navigateTo({
|
|
url: '/pages/profile/userinfo',
|
|
});
|
|
};
|
|
|
|
// type: 0-我喜欢 1-喜欢我
|
|
const goLike = (type: 0 | 1) => {
|
|
uni.navigateTo({
|
|
url: `/pages/profile/like?type=${type}`,
|
|
});
|
|
};
|
|
|
|
// 查看我的评价
|
|
const lookMyEvaluation = async () => {
|
|
await RecentApi.myEvaluate();
|
|
myEvaluation.a = 1;
|
|
myEvaluationShow.value = true;
|
|
};
|
|
|
|
// 关注公众号
|
|
const subOfficial = () => {
|
|
curtainShow.value = true;
|
|
};
|
|
|
|
// 退出登录
|
|
const handleLogout = () => {
|
|
message
|
|
.confirm({
|
|
msg: '',
|
|
title: '确定退出登录吗？',
|
|
})
|
|
.then(() => {
|
|
sheep.$store('user').logout();
|
|
uni.redirectTo({ url: '/pages/login/login' });
|
|
})
|
|
.catch(() => {});
|
|
};
|
|
|
|
// cell菜单
|
|
const MenuCellList = [
|
|
{ title: '我的收益', value: '', icon: 'wallet', to: '' },
|
|
{ title: '访客记录√', value: '', icon: 'dong', to: '/pages/profile/view-record' },
|
|
{ title: '认证中心', value: '', icon: 'user', to: '' },
|
|
{ title: '我的动态√', value: '', icon: 'star', to: '/pages/profile/my-moment' },
|
|
{ title: '我的评价√', value: '', icon: 'view-module', to: '', click: lookMyEvaluation },
|
|
{ title: '问题反馈', value: '', icon: 'backtop-rectangle', to: '' },
|
|
{ title: '客服助手', value: '', icon: 'service', to: '' },
|
|
{ title: '关注公众号√', value: '获取最新消息', icon: 'qrcode', to: '', click: subOfficial },
|
|
{ title: '设置', value: '', icon: 'setting1', to: '' },
|
|
];
|
|
</script>
|