328 lines
9.6 KiB
Vue
328 lines
9.6 KiB
Vue
<template>
|
||
<container-base ref="_containerBase">
|
||
<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 style="height: 15rpx;"></view>
|
||
<view class="column" v-if="myUseReservation.length == 0"
|
||
style="width: 90%; border-radius: 30rpx; background: linear-gradient(to bottom, #D7F0DD, #FFFFFF); box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1); margin: 40rpx auto 0;">
|
||
<!-- 无预约状态 -->
|
||
<view 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>
|
||
</view>
|
||
<view v-else style="overflow: auto;max-height: 600rpx;">
|
||
|
||
<view class="column " style="width: 90%;margin: 0 auto;" v-for="(item, index) in myUseReservation"
|
||
:key="index">
|
||
<reservation-item :reservation="item" @evaluate="_containerBase.openEvaluatePop"
|
||
@click="_containerBase.openReservationPopup" @qianDao="_containerBase.openQianDaoPop" />
|
||
</view>
|
||
</view>
|
||
<view v-if="userInfo != null" class="column"
|
||
style="width: 90%; border-radius: 30rpx; background-color: #FFFFFF; box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1); margin: 40rpx auto 0;">
|
||
|
||
|
||
<view class="row" style="align-items: center; margin-top: 30rpx; margin-left: 20rpx;"
|
||
@click="toMyRecord()">
|
||
<text style="font-size: 24rpx;">我的信誉</text>
|
||
<text v-if="userInfo.credit_score > 0"
|
||
style="font-size: 34rpx; color: #ED3535; margin-left: 10rpx;">{{
|
||
userInfo.credit_score }}</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.play_level" />
|
||
</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.skills_level" />
|
||
</view>
|
||
|
||
<text style="font-size: 24rpx; margin: 20rpx;">鸽子数 {{ userInfo.dove_count }} 次</text>
|
||
|
||
</view>
|
||
|
||
<view v-else class="column"
|
||
style="width: 90%; border-radius: 30rpx; background-color: #FFFFFF; box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1); 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="column"
|
||
style="width: 90%; margin: 40rpx auto 0; border-radius: 30rpx; background-color: #FFFFFF; box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1);">
|
||
|
||
<text style="font-size: 30rpx; margin-top: 26rpx; margin-left: 36rpx;">常用功能</text>
|
||
|
||
<view class="row" style="flex-wrap: wrap; justify-content: flex-start; margin: 40rpx;">
|
||
<view class="column" v-for="item in commonActions" :key="item.label"
|
||
@click="handleCommonAction(item)"
|
||
style="width: 25%; align-items: center; margin-bottom: 30rpx;">
|
||
<image :src="item.icon" style="width: 50rpx; height: 50rpx;" mode=""></image>
|
||
<text style="font-size: 24rpx; margin-top: 20rpx;">{{ item.label }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</container-base>
|
||
|
||
|
||
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
userInfo,
|
||
loadUserInfo,
|
||
isLogin
|
||
} from '@/common/server/user'
|
||
import { navigateToAgreement } from '@/common/system/router'
|
||
import { sqInterface } from '@/common/server/interface/sq'
|
||
import ReservationEvaluate from '@/components/com/page/reservation-evaluate.vue'
|
||
import ContainerBase from '@/components/com/page/container-base.vue'
|
||
import {
|
||
ref,
|
||
reactive,
|
||
onMounted
|
||
} from 'vue'
|
||
import { onShareAppMessage } from '@dcloudio/uni-app';
|
||
import { getShareConfig } from '@/common/server/config'
|
||
import ReservationItem from '@/components/com/page/reservation-item.vue'
|
||
|
||
// 响应式数据
|
||
const rateValue = ref(4.5)
|
||
const loading = ref(false)
|
||
const _containerBase = ref(null)
|
||
|
||
|
||
// 当前预约信息
|
||
const currentAppointment = ref(null)
|
||
|
||
|
||
|
||
|
||
// 常用功能 - 动态项
|
||
const commonActions = [
|
||
{ label: '预约记录', icon: '@@:app/static/me/wodd.png', action: 'appointment' },
|
||
{ label: '订单记录', icon: '@@:app/static/me/wodd.png', action: 'payment' },
|
||
{ label: '常见问题', icon: '@@:app/static/me/cjwt.png', action: 'faq' },
|
||
{ label: '黑名单', icon: '@@:app/static/me/hmd.png', action: 'blacklist' },
|
||
{ label: '联系我们', icon: '@@:app/static/me/lxwm.png', action: 'contact' },
|
||
|
||
]
|
||
|
||
const handleCommonAction = (item) => {
|
||
switch (item.action) {
|
||
case 'appointment':
|
||
toAppointment();
|
||
break;
|
||
case 'blacklist':
|
||
toBlacklist();
|
||
break;
|
||
case 'faq':
|
||
if (userInfo.value == null) {
|
||
uni.navigateTo({
|
||
url: '/pages/me/login'
|
||
});
|
||
return;
|
||
}
|
||
uni.navigateTo({
|
||
url: '/pages/other/faq'
|
||
});
|
||
break;
|
||
case 'payment':
|
||
if (userInfo.value == null) {
|
||
uni.navigateTo({
|
||
url: '/pages/me/login'
|
||
});
|
||
return;
|
||
}
|
||
uni.navigateTo({
|
||
url: '/pages/other/payment-records'
|
||
});
|
||
break;
|
||
case 'contact':
|
||
uni.navigateTo({
|
||
url: '/pages/other/agreement?type=about'
|
||
});
|
||
break;
|
||
default:
|
||
uni.showToast({ title: '敬请期待', icon: 'none' });
|
||
break;
|
||
}
|
||
}
|
||
|
||
const toAppointment = () => {
|
||
if (userInfo.value == null) {
|
||
uni.navigateTo({
|
||
url: '/pages/me/login'
|
||
});
|
||
return;
|
||
}
|
||
|
||
uni.navigateTo({
|
||
url: '/pages/me/appointment-record-page'
|
||
});
|
||
}
|
||
const toMyRecord = async () => {
|
||
var _isLogin = await isLogin();
|
||
if (_isLogin) {
|
||
uni.navigateTo({
|
||
url: '/pages/me/my-record'
|
||
});
|
||
} else {
|
||
uni.navigateTo({
|
||
url: '/pages/me/login'
|
||
});
|
||
}
|
||
}
|
||
|
||
const toEditInfo = () => {
|
||
// 未登录状态，跳转到登录页面
|
||
if (userInfo.value == null) {
|
||
uni.navigateTo({
|
||
url: '/pages/me/login'
|
||
});
|
||
return;
|
||
}
|
||
uni.navigateTo({
|
||
url: '/pages/me/edit-info'
|
||
});
|
||
}
|
||
|
||
const toBlacklist = () => {
|
||
if (userInfo.value == null) {
|
||
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 myUseReservation = ref([]);
|
||
|
||
// 加载当前预约信息 - 未登录状态
|
||
const loadCurrentAppointment = async () => {
|
||
var _isLogin = await isLogin();
|
||
if (!_isLogin) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
var res = await sqInterface.getMyUseReservation();
|
||
console.log("getMyUseReservation", res);
|
||
if (res != null) {
|
||
// console.log("myUseReservation.value.length", myUseReservation.value.length);
|
||
// myUseReservation.value = myUseReservation.value.splice(0, myUseReservation.value.length);
|
||
// console.log("myUseReservation.value.length", myUseReservation.value.length);
|
||
myUseReservation.value = res;
|
||
}
|
||
|
||
|
||
} catch (error) {
|
||
console.error('加载预约信息失败:', error)
|
||
}
|
||
}
|
||
|
||
onShareAppMessage(({ from, target, webViewUrl }) => {
|
||
// console.log('onShareAppMessage', from, target, webViewUrl);
|
||
var resid = 0;
|
||
if (target != null) {
|
||
var item = target.dataset.item;
|
||
console.log('item', item);
|
||
resid = item.id;
|
||
}
|
||
var obj = getShareConfig("pages/index/loading?id=" + resid);
|
||
return obj
|
||
});
|
||
// 页面显示时重新加载数据（用于登录后刷新）
|
||
onShow(async () => {
|
||
// 检查是否有登录状态
|
||
// getUserInfoData();
|
||
loadCurrentAppointment();
|
||
await loadUserInfo();
|
||
})
|
||
onLoad(async () => {
|
||
|
||
//loadCurrentAppointment();
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.content {
|
||
width: 100%;
|
||
height: 100vh;
|
||
background-color: #F7F7F7;
|
||
}
|
||
|
||
.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> |