253 lines
8.6 KiB
Vue
253 lines
8.6 KiB
Vue
<template>
|
|
<!-- 顶部导航 -->
|
|
<wd-config-provider theme="dark">
|
|
<wd-navbar title="我的" safeAreaInsetTop :bordered="false">
|
|
<template #right>
|
|
<navigator url="/pages/profile/userinfo" open-type="navigate" hover-class="navigator-hover">
|
|
<view class="flex items-center rounded-full h-44rpx bg-color-theme py-1 px-2 text-black">
|
|
<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 flex items-center">
|
|
<text>ID: {{ userInfo.id }}</text>
|
|
<image class="size-24rpx ml-4" :src="userGenderImageSrc" mode="scaleToFill" />
|
|
</view>
|
|
<text
|
|
v-if="userCity?.t"
|
|
class="bg-#333 text-color-theme-dark text-xs px-2 py-1 rounded-1 truncate"
|
|
>
|
|
{{ userCity?.t || '' }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 我喜欢和钱包 -->
|
|
<view class="flex my-4">
|
|
<view class="flex-1 flex-col-center" @click="goLike(0)">
|
|
<text class="text-color-theme font-600 text-lg">
|
|
{{ recentTotal.userLikeItTotal || 0 }}
|
|
</text>
|
|
<text class="text-color-theme text-sm">我喜欢</text>
|
|
</view>
|
|
<view class="flex-1 flex-col-center" @click="goLike(1)">
|
|
<text class="text-color-theme font-600 text-lg">
|
|
{{ recentTotal.userLikeMeTotal || 0 }}
|
|
</text>
|
|
<text class="text-color-theme text-sm">喜欢我</text>
|
|
</view>
|
|
<view class="flex-1">
|
|
<navigator
|
|
url="/pages/profile/recharge"
|
|
open-type="navigate"
|
|
hover-class="navigator-hover"
|
|
>
|
|
<view class="flex-col-center">
|
|
<text class="text-color-theme font-600 text-lg">
|
|
{{ fen2yuan(userWallet.balance) }}
|
|
</text>
|
|
<text class="text-color-theme text-sm">钱包</text>
|
|
</view>
|
|
</navigator>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 开通vip -->
|
|
<view
|
|
class="text-color-theme-dark mx-4 p-4 rounded-2 bg-gradient-to-b from-#111 to-#222 b-4 b-solid b-t-#D29E52/60 b-l-#D29E52/40 b-r-#D29E52/40 b-b-#D29E52/20 flex justify-between"
|
|
>
|
|
<view class="font-900 font-italic text-xl">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-4 px-4 py-1 rounded-full text-24rpx bg-color-theme text-black">
|
|
立即开通
|
|
</text>
|
|
</navigator>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 用户相册 -->
|
|
<user-ablum :ablumList="ablumList" />
|
|
<!-- 菜单 -->
|
|
<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.onClick"
|
|
/>
|
|
</wd-cell-group>
|
|
</view>
|
|
<view class="h-100rpx"></view>
|
|
</scroll-view>
|
|
|
|
<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">
|
|
<text>我的评价</text>
|
|
<text class="ml-1 text-sm">{{ myEvaluation.evaluateCount }}</text>
|
|
</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.scoreSc" 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.scoreSk" 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.scoreYq" 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.scoreNx" readonly />
|
|
</view>
|
|
</view>
|
|
<view class="text-color-theme text-lg">
|
|
综合评分 {{ myEvaluation.avgScore?.toFixed(2) || 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 RecentApi from '@/sheep/api/member/recent';
|
|
import { onLoad } from '@dcloudio/uni-app';
|
|
// @ts-ignore
|
|
import { fen2yuan } from '@/sheep/hooks/useGoods';
|
|
|
|
const { ablumList } = useAblum();
|
|
|
|
// 统计信息
|
|
const recentTotal = ref({
|
|
memberRecentId: null,
|
|
bizType: null,
|
|
likeTotal: 0,
|
|
likeItTotal: 0,
|
|
likeMeTotal: 0,
|
|
reportTotal: 0,
|
|
shieldTotal: 0,
|
|
collectTotal: 0,
|
|
userLikeItTotal: 0,
|
|
userLikeMeTotal: 0,
|
|
});
|
|
|
|
// 我的评价数据
|
|
const myEvaluation = reactive({
|
|
scoreSc: 0,
|
|
scoreNx: 0,
|
|
scoreSk: 0,
|
|
scoreYq: 0,
|
|
avgScore: 0,
|
|
evaluateCount: 0,
|
|
});
|
|
const myEvaluationShow = ref(false); // 我的评价弹窗
|
|
const curtainShow = ref(false); // 关注公众号弹窗
|
|
|
|
const userInfo = computed(() => sheep.$store('user').userInfo);
|
|
const userCity = computed(() => sheep.$store('user').userCity);
|
|
const userWallet = computed(() => sheep.$store('user').userWallet);
|
|
const userGenderImageSrc = computed(() => {
|
|
const sex = userInfo.value.sex;
|
|
if (sex === 1) return '/static/gender-man.png';
|
|
if (sex === 2) return '/static/gender-woman.png';
|
|
return '';
|
|
});
|
|
|
|
onLoad(async () => {
|
|
const { data: totalData } = await RecentApi.recentTotal();
|
|
recentTotal.value = totalData ?? {};
|
|
});
|
|
|
|
// type: 0-我喜欢 1-喜欢我
|
|
const goLike = (type: 0 | 1) => {
|
|
uni.navigateTo({
|
|
url: `/pages/profile/like?type=${type}`,
|
|
});
|
|
};
|
|
|
|
// 查看我的评价
|
|
const lookMyEvaluation = async () => {
|
|
const { data = null } = await RecentApi.myEvaluate();
|
|
if (data) {
|
|
Object.assign(myEvaluation, data);
|
|
myEvaluationShow.value = true;
|
|
return;
|
|
}
|
|
uni.showToast({ title: '查看失败', icon: 'none' });
|
|
};
|
|
|
|
// 关注公众号
|
|
const subOfficial = () => {
|
|
curtainShow.value = true;
|
|
};
|
|
|
|
// 问题反馈
|
|
const goFeedback = () => {
|
|
uni.navigateTo({
|
|
url: '/pages/profile/feedback',
|
|
});
|
|
};
|
|
|
|
// 菜单
|
|
const MenuCellList = [
|
|
{ title: '我的收益', value: '', icon: 'wallet', to: '/pages/wechat/index' },
|
|
{ title: '访客记录√', value: '', icon: 'browse', to: '/pages/profile/view-record' },
|
|
{ title: '认证中心', value: '', icon: 'user', to: '/pages/profile/face-verify' },
|
|
{ title: '我的动态√', value: '', icon: 'star', to: '/pages/profile/my-moment' },
|
|
{ title: '我的评价√', value: '', icon: 'view-module', to: '', onClick: lookMyEvaluation },
|
|
{ title: '问题反馈√', value: '', icon: 'backtop-rectangle', to: '', onClick: goFeedback },
|
|
// { title: '客服助手', value: '', icon: 'service', to: '' },
|
|
{ title: '关注公众号√', value: '获取最新消息', icon: 'qrcode', to: '', onClick: subOfficial },
|
|
{ title: '设置√', value: '', icon: 'setting1', to: '/pages/profile/setting' },
|
|
];
|
|
</script>
|