453 lines
14 KiB
Vue
453 lines
14 KiB
Vue
<template>
|
||
<view class="content column">
|
||
|
||
<!-- 加载状态 -->
|
||
<view v-if="loading" class="loading-container">
|
||
<text>加载中...</text>
|
||
</view>
|
||
|
||
<view v-if="userInfo != null" class="row" style="margin-top: 150rpx; align-items: center; margin-left: 40rpx;">
|
||
<image :src="userInfo.avatarImage" style="width: 80rpx; height: 80rpx; border-radius: 50%;" mode="">
|
||
</image>
|
||
<view class="column" style="margin-left: 50rpx; font-size: 24rpx;">
|
||
<view class="row" @click="toEditInfo()" style="align-items: center;">
|
||
<text>{{ userInfo.nickName }}</text>
|
||
</view>
|
||
<text style="margin-top: 10rpx;">UID：{{ userInfo.id }}</text>
|
||
|
||
</view>
|
||
</view>
|
||
<view v-else class="row" style="margin-top: 150rpx; align-items: center; margin-left: 40rpx;">
|
||
<image src="@@:app/nouser.png" style="width: 80rpx; height: 80rpx; border-radius: 50%;" mode=""></image>
|
||
<view class="column" style="margin-left: 50rpx; font-size: 24rpx;">
|
||
<view class="row" @click="toEditInfo()" style="align-items: center;">
|
||
<text>未登录</text>
|
||
</view>
|
||
<text style="margin-top: 10rpx; color: #999;" @click="toLogin()">点击登录</text>
|
||
</view>
|
||
</view>
|
||
<view class="column" @click="currentAppointment ? openPop() : null"
|
||
style="width: 90%; border-radius: 10rpx; background-color: #F2F3F5; margin: 40rpx auto 0;">
|
||
|
||
<!-- 无预约状态 -->
|
||
<view v-if="!currentAppointment" class="row" style="align-items: center; margin: 20rpx;">
|
||
<image src="@@:app/static/no_content.png" style="width: 150rpx; height: 150rpx;" mode=""></image>
|
||
<text style="margin-left: 40rpx;">当前没有预约</text>
|
||
</view>
|
||
|
||
<!-- 有预约状态 -->
|
||
<template v-else>
|
||
<text style="font-size: 24rpx; margin-left: 20rpx; margin-top: 25rpx;">
|
||
{{ currentAppointment.startTime }} ~ {{ currentAppointment.endTime }} 共{{
|
||
currentAppointment.duration }}
|
||
</text>
|
||
<text style="font-size: 24rpx; margin-left: 20rpx; margin-top: 10rpx;">{{ currentAppointment.room
|
||
}}</text>
|
||
|
||
<view class="row"
|
||
style="font-size: 24rpx; margin-left: 20rpx; margin-top: 20rpx; align-items: center; margin-bottom: 20rpx;">
|
||
<text>已预约人员</text>
|
||
<image v-for="(participant, index) in currentAppointment.participants" :key="index"
|
||
:src="participant.avatar || ''"
|
||
style="width: 30rpx; height: 30rpx; background-color: antiquewhite; border-radius: 50%; margin-left: 10rpx;"
|
||
mode=""></image>
|
||
|
||
<text style="font-size: 24rpx; margin-left: auto; margin-right: 20rpx;">查看详情</text>
|
||
</view>
|
||
</template>
|
||
|
||
</view>
|
||
|
||
|
||
<view v-if="userInfo != null" class="column"
|
||
style="width: 90%; border-radius: 10rpx; background-color: #F2F3F5; margin: 40rpx auto 0;">
|
||
|
||
|
||
<view class="row" style="align-items: center; margin-top: 30rpx; margin-left: 20rpx;">
|
||
<text style="font-size: 24rpx;">我的评分</text>
|
||
<text v-if="userInfo.rating > 0" style="font-size: 34rpx; color: #ED3535; margin-left: 10rpx;">{{
|
||
userInfo.rating }}</text>
|
||
<text v-else style="font-size: 24rpx; color: #999; margin-left: 10rpx;">未评分</text>
|
||
<text style="font-size: 24rpx; margin-left: 180rpx;">我的信誉</text>
|
||
<text v-if="userInfo.reputation > 0" style="font-size: 34rpx; color: #ED3535; margin-left: 10rpx;">{{
|
||
userInfo.reputation }}</text>
|
||
<text v-else style="font-size: 24rpx; color: #999; margin-left: 10rpx;">未评级</text>
|
||
</view>
|
||
|
||
<view class="row" style="align-items: center; margin-top: 20rpx; margin-left: 20rpx;">
|
||
<text style="font-size: 24rpx;">牌品</text>
|
||
<uni-rate style="margin-left: 20rpx;" :readonly="true" v-model="userInfo.cardQuality" />
|
||
</view>
|
||
|
||
<view class="row" style="align-items: center; margin-top: 20rpx; margin-left: 20rpx;">
|
||
<text style="font-size: 24rpx;">牌技</text>
|
||
<uni-rate style="margin-left: 20rpx;" :readonly="true" v-model="userInfo.cardSkill" />
|
||
</view>
|
||
|
||
<text style="font-size: 24rpx; margin: 20rpx;">鸽子数 {{ userInfo.pigeonCount }}次</text>
|
||
|
||
</view>
|
||
|
||
<view v-else class="column"
|
||
style="width: 90%; border-radius: 10rpx; background-color: #F2F3F5; margin: 40rpx auto 0;">
|
||
<view class="row" style="align-items: center; margin-top: 30rpx; margin-left: 20rpx;">
|
||
<text style="font-size: 24rpx;">我的评分</text>
|
||
<text style="font-size: 24rpx; color: #999; margin-left: 10rpx;">未评分</text>
|
||
<text style="font-size: 24rpx; margin-left: 180rpx;">我的信誉</text>
|
||
<text style="font-size: 24rpx; color: #999; margin-left: 10rpx;">未评级</text>
|
||
</view>
|
||
|
||
<view class="row" style="align-items: center; margin-top: 20rpx; margin-left: 20rpx;">
|
||
<text style="font-size: 24rpx;">牌品</text>
|
||
<uni-rate style="margin-left: 20rpx;" :readonly="true" />
|
||
</view>
|
||
|
||
<view class="row" style="align-items: center; margin-top: 20rpx; margin-left: 20rpx;">
|
||
<text style="font-size: 24rpx;">牌技</text>
|
||
<uni-rate style="margin-left: 20rpx;" :readonly="true" />
|
||
</view>
|
||
|
||
<text style="font-size: 24rpx; margin: 20rpx;">鸽子数 0次</text>
|
||
|
||
</view>
|
||
|
||
<view class="row" style="width: 90%; margin: 40rpx auto 0;">
|
||
|
||
<view class="column" @click="toAppointment()" style="align-items: center;">
|
||
<image src="@@:app/static/appoin_record.png" style="width: 50rpx; height: 50rpx;" mode=""></image>
|
||
<text style="font-size: 24rpx; margin-top: 20rpx;">预约记录</text>
|
||
</view>
|
||
|
||
<view class="column" style="align-items: center; margin-left: 40rpx;">
|
||
<image src="@@:app/static/problem.png" style="width: 50rpx; height: 50rpx;" mode=""></image>
|
||
<text style="font-size: 24rpx; margin-top: 20rpx;">常见问题</text>
|
||
</view>
|
||
|
||
<view class="column" style="align-items: center; margin-left: 40rpx;">
|
||
<image src="@@:app/static/customer_s.png" style="width: 50rpx; height: 50rpx;" mode=""></image>
|
||
<text style="font-size: 24rpx; margin-top: 20rpx;">联系我们</text>
|
||
</view>
|
||
|
||
<view class="column" @click="toBlacklist()" style="align-items: center; margin-left: 40rpx;">
|
||
<image src="@@:app/static/blacklist.png" style="width: 50rpx; height: 50rpx;" mode=""></image>
|
||
<text style="font-size: 24rpx; margin-top: 20rpx;">黑名单</text>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
|
||
|
||
<uni-popup ref="infoPop" type="center">
|
||
|
||
<view class="column center"
|
||
style="width: 680rpx; background-color: white; border-radius: 10rpx; padding: 20rpx;">
|
||
|
||
<text style="">预约信息</text>
|
||
|
||
<view class="column"
|
||
style="width: 100%; height: 180rpx; background-color: #E3E2E2; margin-top: 20rpx; border-radius: 10rpx;">
|
||
<view class="row" style="margin-top: 20rpx; align-items: center; margin-left: 20rpx;">
|
||
<text style="font-size: 22rpx;">发起者</text>
|
||
<image :src="appointmentDetail.organizer.avatar"
|
||
style="width: 50rpx; height: 50rpx; background-color: antiquewhite; border-radius: 50%; margin-left: 20rpx;"
|
||
mode=""></image>
|
||
<text style="font-size: 20rpx; margin-left: 15rpx;">{{ appointmentDetail.organizer.name }}</text>
|
||
</view>
|
||
<view class="row" style="margin-top: 30rpx; align-items: center; margin-left: 20rpx;">
|
||
<text style="font-size: 22rpx;">参与者</text>
|
||
|
||
<view class="row" v-for="(participant, index) in appointmentDetail.participants" :key="index"
|
||
style="align-items: center;">
|
||
|
||
<view class="" style="position: relative; width: 50rpx; height: 50rpx; display: flex;">
|
||
<image :src="participant.avatar" @click="openUserPop()"
|
||
style="width: 50rpx; height: 50rpx; background-color: antiquewhite; border-radius: 50%; margin-left: 20rpx; position: absolute;"
|
||
mode=""></image>
|
||
|
||
<view v-if="participant.isBlacklisted" class="center"
|
||
style="width: 50rpx; height: 20rpx; background-color: #FFB7B7; position: absolute; left: 40%; top: -10rpx;">
|
||
<text style="font-size: 10rpx;">黑名单</text>
|
||
</view>
|
||
</view>
|
||
|
||
<text
|
||
style="font-size: 20rpx; margin-left: 30rpx; width: 100rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{
|
||
participant.name }}</text>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
|
||
|
||
<view class="column"
|
||
style="width: 100%; height: 180rpx; background-color: #E3E2E2; margin-top: 20rpx; border-radius: 10rpx;font-size: 22rpx;">
|
||
|
||
<view class="row" style="justify-content: space-between; margin: 20rpx;">
|
||
<text>开始时间</text>
|
||
<text>{{ appointmentDetail.timeInfo.startTime }}</text>
|
||
</view>
|
||
<view class="row" style="justify-content: space-between; margin: 0 20rpx;">
|
||
<text>结束时间</text>
|
||
<text>{{ appointmentDetail.timeInfo.endTime }}</text>
|
||
</view>
|
||
|
||
<text style="margin: 30rpx 20rpx 0;">合计：{{ appointmentDetail.timeInfo.duration }}</text>
|
||
|
||
</view>
|
||
|
||
<view class="column"
|
||
style="width: 100%; background-color: #E3E2E2; margin-top: 20rpx; border-radius: 10rpx; font-size: 22rpx;">
|
||
<text style="margin: 20rpx 20rpx 10rpx; font-size: 24rpx;">房间号：{{ appointmentDetail.roomInfo.roomNumber
|
||
}}，{{ appointmentDetail.roomInfo.price }}</text>
|
||
<text style="margin: 10rpx 20rpx;">人数：{{ appointmentDetail.roomInfo.playerCount }}人</text>
|
||
<text style="margin: 10rpx 20rpx;">玩法类型：{{ appointmentDetail.roomInfo.gameType }}</text>
|
||
<text style="margin: 10rpx 20rpx;">具体规则：{{ appointmentDetail.roomInfo.rules }}</text>
|
||
<text style="margin: 10rpx 20rpx 20rpx;">补充信息：{{ appointmentDetail.roomInfo.additionalInfo }}</text>
|
||
</view>
|
||
|
||
<view class="column"
|
||
style="width: 100%; background-color: #E3E2E2; margin-top: 20rpx; border-radius: 10rpx; font-size: 22rpx;">
|
||
<text style="margin: 20rpx 20rpx 10rpx; font-size: 24rpx;">是否禁烟：{{
|
||
appointmentDetail.requirements.smoking
|
||
}}</text>
|
||
<text style="margin: 10rpx 20rpx;">性别：{{ appointmentDetail.requirements.gender }}</text>
|
||
<text style="margin: 10rpx 20rpx 20rpx;">信誉：{{ appointmentDetail.requirements.reputation }}</text>
|
||
</view>
|
||
|
||
<view class="column"
|
||
style="width: 100%; background-color: #E3E2E2; margin-top: 20rpx; border-radius: 10rpx; font-size: 22rpx;">
|
||
<text style="margin: 20rpx 20rpx 10rpx; font-size: 24rpx;">鸽子费：{{ appointmentDetail.pigeonFee }}</text>
|
||
<text
|
||
style="margin: 10rpx 20rpx 20rpx; color: #9F9F9F;">组局成功后若有牌友未赴约，其鸽子费平均分给其他牌友。组局成功或失败后鸽子费将全额返还。</text>
|
||
</view>
|
||
|
||
<view class="row" style="width: 100%; margin-top: 30rpx;">
|
||
<view class="center" @click="clasePop()"
|
||
style="height: 80rpx; flex: 1; background-color: #9F9F9F; border-radius: 10rpx;">
|
||
<text style="font-size: 24rpx; font-weight: 600; color: white;">关闭</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
|
||
</template>
|
||
|
||
<script setup>
|
||
import { userInfo, loadUserInfo } from '@/common/server/user'
|
||
import { ref, reactive, onMounted } from 'vue'
|
||
|
||
// 响应式数据
|
||
const rateValue = ref(4.5)
|
||
const infoPop = ref(null)
|
||
const loading = ref(false)
|
||
|
||
// 用户信息 - 未登录状态
|
||
// const userInfo = reactive({
|
||
// nickname: '未登录',
|
||
// uid: '',
|
||
// avatar: '@@:app/nouser.png',
|
||
// rating: 0,
|
||
// reputation: 0,
|
||
// cardQuality: 0,
|
||
// cardSkill: 0,
|
||
// pigeonCount: 0
|
||
// })
|
||
|
||
// 当前预约信息
|
||
const currentAppointment = ref(null)
|
||
|
||
// 预约详情数据
|
||
const appointmentDetail = reactive({
|
||
organizer: {
|
||
name: '苏家辉',
|
||
avatar: '',
|
||
isBlacklisted: false
|
||
},
|
||
participants: [
|
||
{
|
||
name: '树下的胖子',
|
||
avatar: '',
|
||
isBlacklisted: true
|
||
},
|
||
{
|
||
name: '张三',
|
||
avatar: '',
|
||
isBlacklisted: false
|
||
},
|
||
{
|
||
name: '李四',
|
||
avatar: '',
|
||
isBlacklisted: false
|
||
}
|
||
],
|
||
timeInfo: {
|
||
startTime: '2025/08/27 15：30',
|
||
endTime: '2025/08/27 17：30',
|
||
duration: '2小时'
|
||
},
|
||
roomInfo: {
|
||
roomNumber: '304号-大包',
|
||
price: '30元/小时',
|
||
playerCount: 3,
|
||
gameType: '扑克',
|
||
rules: '斗地主',
|
||
additionalInfo: '无'
|
||
},
|
||
requirements: {
|
||
smoking: '禁烟',
|
||
gender: '不限',
|
||
reputation: '≧4.0'
|
||
},
|
||
pigeonFee: '0元'
|
||
})
|
||
|
||
// 方法
|
||
const openPop = () => {
|
||
infoPop.value.open();
|
||
}
|
||
|
||
const clasePop = () => {
|
||
infoPop.value.close();
|
||
}
|
||
|
||
const toAppointment = () => {
|
||
// 未登录状态，提示登录
|
||
if (!userInfo.uid) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '请先登录查看预约记录',
|
||
showCancel: false,
|
||
success: () => {
|
||
uni.navigateTo({
|
||
url: '/pages/me/login'
|
||
});
|
||
}
|
||
});
|
||
return;
|
||
}
|
||
|
||
uni.navigateTo({
|
||
url: '/pages/me/appointment-record-page'
|
||
});
|
||
}
|
||
|
||
const toEditInfo = () => {
|
||
// 未登录状态，跳转到登录页面
|
||
if (userInfo == null) {
|
||
uni.navigateTo({
|
||
url: '/pages/me/login'
|
||
});
|
||
return;
|
||
}
|
||
uni.navigateTo({
|
||
url: '/pages/me/edit-info'
|
||
});
|
||
}
|
||
|
||
const toBlacklist = () => {
|
||
// 未登录状态，提示登录
|
||
if (!userInfo.uid) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '请先登录查看黑名单',
|
||
showCancel: false,
|
||
success: () => {
|
||
uni.navigateTo({
|
||
url: '/pages/me/login'
|
||
});
|
||
}
|
||
});
|
||
return;
|
||
}
|
||
|
||
uni.navigateTo({
|
||
url: '/pages/me/blacklist-page'
|
||
});
|
||
}
|
||
|
||
const openUserPop = () => {
|
||
// 打开用户详情弹窗的逻辑
|
||
console.log('打开用户详情弹窗');
|
||
}
|
||
|
||
const toLogin = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/me/login'
|
||
});
|
||
}
|
||
|
||
// 加载用户数据 - 未登录状态
|
||
const loadUserData = async () => {
|
||
loading.value = true
|
||
try {
|
||
// 未登录状态，不加载用户数据
|
||
// 保持默认的未登录状态
|
||
userInfo.nickname = '未登录'
|
||
userInfo.uid = ''
|
||
userInfo.rating = 0
|
||
userInfo.reputation = 0
|
||
userInfo.cardQuality = 0
|
||
userInfo.cardSkill = 0
|
||
userInfo.pigeonCount = 0
|
||
|
||
} catch (error) {
|
||
console.error('加载用户数据失败:', error)
|
||
uni.showToast({
|
||
title: '加载失败',
|
||
icon: 'error'
|
||
})
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
// 加载当前预约信息 - 未登录状态
|
||
const loadCurrentAppointment = async () => {
|
||
try {
|
||
// 未登录状态，没有预约数据
|
||
currentAppointment.value = null
|
||
|
||
} catch (error) {
|
||
console.error('加载预约信息失败:', error)
|
||
currentAppointment.value = null
|
||
}
|
||
}
|
||
|
||
// 组件挂载时加载数据
|
||
onMounted(() => {
|
||
loadUserData()
|
||
loadCurrentAppointment()
|
||
})
|
||
|
||
// 页面显示时重新加载数据（用于登录后刷新）
|
||
onShow(() => {
|
||
// 检查是否有登录状态
|
||
// getUserInfoData();
|
||
})
|
||
onLoad(async () => {
|
||
console.log('kiad');
|
||
await loadUserInfo();
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.content {
|
||
width: 100%;
|
||
height: 100vh;
|
||
}
|
||
|
||
.loading-container {
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
background-color: rgba(0, 0, 0, 0.7);
|
||
color: white;
|
||
padding: 20rpx 40rpx;
|
||
border-radius: 10rpx;
|
||
z-index: 9999;
|
||
}
|
||
</style> |