fny-ugd-palace-uniapp/pages/signs/me/me.vue

<template>
	<view class="sign-page">
		<!-- 导航 -->
		<NavBar :navOpacity="navOp"></NavBar>
		<view class="views-wrap">
			<!-- 我的 -->
			<view class="head-wrap">
				<view class="head-content">
					<view class="avatar">
						<image v-if="!isLogin" style="width: 100%;height: 100%;border-radius: 50%;overflow: hidden;" src="/static/app/unlogin.png" mode="aspectFit"></image>
						<image v-if="isLogin" style="width: 100%;height: 100%;border-radius: 50%;overflow: hidden;" :src="userInfo.avatarUrl || userInfo.headimgUrl" mode="aspectFit"></image>
					</view>
					<view class="name" v-if="isLogin">{{userInfo.nickName || '微信用户'}}</view>
					<view class="phone" v-if="isLogin">{{userInfo.phone | phoneSafe}}</view>
					<view class="login-btn" v-if="!isLogin" @click="loginHandle">登录</view>
				</view>
				<view class="head-bg">
					<image class="image-inner" src="/static/app/page2/head_bg.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<!-- 预约记录 -->
		<view class="records-wrap">
			<!-- 我的头 -->
			<view class="box-head">
				<view class="name">预约记录</view>
			</view>

			<view class="records-body">
				<!-- <scroll-view style="height: 100%;width: 100%;" :scroll-y="true"> -->
					<view class="record-item" v-for="(item,index) in list" :key="item.id" @click="navToDetail(item)">
						<view class="title-wrap">
							<view class="date">{{item.yuyueTime}}</view>
							<view class="status" :class="{'over': item.statusName == '已超时', 'waiting': item.statusName == '预约' , 'end': item.statusName == '已到访'}">{{item.statusName}}</view>
						</view>
						<view class="divide"></view>
						<view class="content-wrap">
							<view class="row">
								<view class="label">预约人数：</view>
								<view class="text">{{item.num}}人</view>
							</view>
							<view class="row">
								<view class="label">预约阁位：</view>
								<view class="text">{{item.cabinetAreaName}}-{{item.cabinetPositionName}}阁位</view>
							</view>
							<view class="row" v-if="item.updateTime">
								<view class="label">到访时间：</view>
								<view class="text">{{item.daofangTime}}</view>
							</view>
						</view>
					</view>

					<view class="empty-wrap" v-if="list.length == 0">
						<image class="inner-img" src="/static/app/data_empty.png" mode="widthFix"></image>
						<view class="text">暂无预约</view>
					</view>
				<!-- </scroll-view> -->
			</view>

		</view>

		<view style="height: 60rpx;"></view>

		<!-- 授权 -->
		<c-pop-auth ref="modelAuth"></c-pop-auth>

		<!-- 手机号 -->
		<c-pop-phone ref="modelPhone"></c-pop-phone>

		<!-- 年龄询问 -->
		<!-- <c-pop-adulthood ref="modelAdulthood"></c-pop-adulthood> -->

		<!-- 默认loading -->
		<u-toast ref="uToast"></u-toast>

		<!-- 客户 -->
		<!-- <c-service></c-service> -->
	</view>
</template>

<script>
	import NavBar from './nav-bar/nav-bar.vue'
	import store from '@/store'
	import dayjs from '@/common/dayjs/dayjs.min.js'
	import { mapActions, mapState, mapGetters } from 'vuex';
	export default {
		components: { NavBar },
		data() {
			return {
				first: false,
				list: [],
				navOp: 0
			};
		},
		computed:{
			...mapGetters(['isLogin', 'userInfo']),
		},
		filters:{
			phoneSafe(value){
				if(value && value.length == 11){
					var tel = "" + value;
					return tel.replace(tel.substring(3,7), "****")
				}else{
					return '未授权'
				}
			}
		},
		onPageScroll(e) {
			let limitH = 200;
			if(e.scrollTop > limitH){
				this.navOp = 1;
			}else{
				this.navOp = e.scrollTop / limitH;
			}
		},
		methods: {
			...mapActions({
				'getLikeP': 'getLikeP',
				'getLikeS': 'getLikeS',
			}),
			loginHandle() {
				this.$refs.modelAuth.$confirm({}).then(res => {
					this.loadData()
				})
			},
			navToDetail(item) {
				const {code ,visitDate, visitTime} = item
				this.$st(() => {
					this.$u.route({
						url: '/pages/signs/invitation/invitation',
						type: "navigateTo",
						params: {
							code: code,
							visitDate: visitDate,
							visitTime: visitTime,
						}
					})
				})
			},
			async loadData() {

				const res = await this.$api('signs.getOpenidVisitList', {...this.form})

				this.$refs.uToast.hide()

				if(res.code == 200){
					// 预约列表
					this.list = res.data.map(item => {
						return {...item, daofangTime: item.updateTime && dayjs(item.updateTime).format('YYYY年MM月DD日 hh:mm'), yuyueTime: dayjs(item.visitDate + ' ' + item.visitTime).format('YYYY年MM月DD日 hh:mm')}
					});
				}else{
					this.$refs.uToast.show({type: 'error', message: res.msg, position: 'top'})
				}
			}
		},
		onLoad() {
			// this.loadData()
		},
		onShow() {
			 this.loadData()
		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>