yogaApp/pages/user/mycustom.vue

<template>
	<view class="page">
		<view class="swiper-bg">
			<uni-search-bar @confirm="search" :focus="false" v-model="searchValue" placeholder="请输入关键字" 
			bg-color="#FFFFFF" @cancel="cancel" @clear="clear">
			</uni-search-bar>
		</view>
		<!-- 列表 -->
		<view class="f-list">
			<view class="guess-section" v-if="goodsList.length>0">
				<view v-for="(item, index) in goodsList" :key="index" class="guess-item" @click="navToList(item.id)">
					<view class="pcon">
						<view class="ptxt" style="width: 280rpx;">
							姓名：{{item.studentName}}
						</view>
						<view class="ptxt" style="width: 160rpx;">
							性别：{{item.sex==1?'女':(item.sex==2?'男':'未知')}}
						</view>
						<view class="ptxt">
							年龄：{{item.age}}
						</view>
					</view>
					<view class="pcon">
						<view class="ptxt" style="width: 280rpx;">
							生日：{{item.birthDay}}
						</view>
						<view class="ptxt">
							电话：{{item.phone}}
						</view>
					</view>
					<view class="pcon">
						<view class="ptxt" style="width: 280rpx;">
							课程：{{item.courseName}}
						</view>
						<view class="ptxt">
							收费模式：{{item.chargeType=='hour'?'课时':(item.chargeType=='date'?'时间':(item.chargeType=='cycle'?'周期':'其他'))}}
						</view>
					</view>
					<view class="pcon">
						<view class="ptxt">
							收费：￥{{item.receiptFee}}
						</view>
					</view>
					<view class="pcon">
						<view class="ptxt">
							有限期限：{{(item.beginDate?item.beginDate:' — ')+'至'+(item.expireDate?item.expireDate:' — ')}}
						</view>
					</view> 
				</view>
			</view>
			<view v-else class="skcon">
				<image v-if="loadStatus=='noMore'" class="skimg" src="@/static/image/no.png" mode="aspectFill" ></image>
			</view>
			<uni-load-more iconType="circle" :status="loadStatus" :content-text="contentText" />
			
		</view>
		
		<!-- 是否登录 -->
		<openlogin ref="loginId" @getPhoneNumber="getPhoneNumber"></openlogin>
		
		<!-- service 客服-->
		<service ref="serviceId" @goservice="goservice"></service>
		
		<!-- top 返回顶部-->
		<top ref="topId"></top>
		
		<u-toast ref="uToast" />
		
	</view>
</template>

<script>
	import { myCache,getRemoteFile } from '../../utils/utils.js';
	import openlogin from "../components/openlogin.vue";
	import top from "../components/top.vue";
	import service from "../components/service.vue";
	export default {
		components: {
		  openlogin,top,service
		},
		data() {
			return {
				openId:"",
				phone:"",
				userid:"",
				searchValue:"",
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: ''
				},
				goodsList: [
					// {
					// 	id:1,
					// 	name:"丽丽",
					// 	sex:"女",
					// 	age:"20",
					// 	phone:"18900000001",
					// 	type:"精品团课",
					// 	date:"2025年03月05日-2025年04月05日",
					// },
				],
				loadStatus:'more',
				page: {
					pageNum: 1,
					pageSize: 10
				}
			};
		},
		onLoad(options) {
			this.getList();
		},
		onPullDownRefresh() {
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},500);
		},
		onReachBottom() {
			console.log('onReachBottom');
			 this.loadData();
		},
		onShareAppMessage: function(options){
			// 设置菜单中的转发按钮触发转发事件时的转发内容
			var shareObj = {
				title: "三朵蘭以【预防未病，助人健康】为己任，一直为瑜伽而传播、为更多人保持和恢复健康助力！让更多人通过练习瑜伽拥有健康的体魄、平和宁静的内心、幸福和快乐的生活！", // 默认是小程序的名称(可以写slogan等)
				path: `/pages/index/index`,    // 默认是当前页面，必须是以‘/'开头的完整路径
				imageUrl: '/static/image/logo.png',  //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
				success: function(res){
					console.log("success",res)
					// 转发成功之后的回调
					if(res.errMsg == 'shareAppMessage:ok'){
						console.log("转发成功")
					}
				},
				fail: function(res){
					// 转发失败之后的回调
					if(res.errMsg == 'shareAppMessage:fail cancel'){
						// 用户取消转发
						console.log("用户取消转发")
					}
					else if(res.errMsg == 'shareAppMessage:fail'){
						// 转发失败，其中 detail message 为详细失败信息
						console.log("转发失败")
					}
				}
			};
		    return shareObj;
		},
		// 自定义页面的分享到朋友圈
		onShareTimeline(res) {
			// 设置菜单中的转发按钮触发转发事件时的转发内容
			var shareObj = {
			  title: "三朵蘭以【预防未病，助人健康】为己任，一直为瑜伽而传播、为更多人保持和恢复健康助力！让更多人通过练习瑜伽拥有健康的体魄、平和宁静的内心、幸福和快乐的生活！", // 默认是小程序的名称(可以写slogan等)
			  path: `/pages/index/index`,    // 默认是当前页面，必须是以‘/'开头的完整路径
			  imageUrl: '/static/image/logo.png',  //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
			  success: function(res){
				console.log("success",res)
			    // 转发成功之后的回调
			    if(res.errMsg == 'shareAppMessage:ok'){
					console.log("转发成功")
			    }
			  },
			  fail: function(){
			    // 转发失败之后的回调
			    if(res.errMsg == 'shareAppMessage:fail cancel'){
			      // 用户取消转发
				  console.log("用户取消转发")
			    }
				else if(res.errMsg == 'shareAppMessage:fail'){
			      // 转发失败，其中 detail message 为详细失败信息
				  console.log("转发失败")
			    }
			  }
			};
			return shareObj;
		},
		onPageScroll(e) {
			//调用子组件方法
			this.$refs.topId.topData(e.scrollTop);
		},
		methods: {
			goservice(val){
				console.log(val);
			},
			search(res) {
				this.searDo();
			},
			clear(res) {
				this.searchValue="";
				this.$forceUpdate();
				this.searDo();
			},
			cancel(res) {
				this.searchValue="";
				this.$forceUpdate();
				this.searDo();
			},
			getPhoneNumber(e){
				if(e.customer_id){
					this.customer_id = e.customer_id
				}
			},
			getimgRemoteFile(img){
				if(img){
					img=img.split(',')[0];
					return getRemoteFile(img)
				}
				else{
					return require("@/static/image/theme/t2.png")
				}
			},
			async getList() {
				this.loadStatus="loading";
				var param={
					"keyword":this.searchValue
				}
				const {data: res1} = await uni.$http.get('/api/my/myClient',param);
				if(res1.success==false){
					this.loadStatus="noMore";
					this.contentText.contentnomore="暂无数据...";
					this.$refs.uToast.show({
						title: res1.message?res1.message:'获取信息失败，请联系管理员确认权限！',
						type: 'error',
						duration: 2000
					});
					return false;
				}
				if (res1.data&&res1.data.length>0) {
					this.loadStatus="noMore";
					this.contentText.contentnomore="没有数据了...";
					this.goodsList=res1.data;
					this.$forceUpdate();
				}
			},
			searDo(){
				this.loadStatus="more";
				this.loadData();
			},
			loadData(){
				// 加载
				if(this.loadStatus=="more") {
					this.loadStatus="loading";
					setTimeout(() => {
						this.getList();
					}, 300);
				}
			},
			navToList(id){
				// uni.navigateTo({
				// 	url: `/pages/product/detail?id=${id}`
				// })
			},
			
		}
	}
</script>

<style lang="less" scoped>
	.page {
		padding: 0;
		position: relative;
		background-image: url('@/static/image/bg.jpg');
		background-attachment: fixed;
		background-size: cover;
		background-position: center center;
		min-height: calc(100vh - var(--window-top) - var(--window-bottom));
	}
	.skcon{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		.skimg{
			width: 338rpx;
			height: 300rpx;
			margin-top: 200rpx;
		}
	}
	.f-list {
		margin: 10rpx 20rpx 20rpx 20rpx;
		padding:20rpx 20rpx 20rpx 20rpx;
		background: #FFF;
		box-shadow:0 1px 3px 2px rgba(0, 0, 0, 0.03),inset 0 30px 15px #f5f5f5;
		border-radius: 20rpx;
		.guess-section{
			display:flex;
			flex-wrap:wrap;
			padding: 20rpx;
			background: #fff;
			.guess-item{
				display:flex;
				flex-direction: column;
				width: 100%;
				padding: 15rpx 0;
				margin-bottom: 15rpx;
				border-bottom: 1rpx solid #eee;
			}
			.pcon{
				display:flex;
				flex-direction: row;
				padding: 10rpx;
			}
			.ptxt{
				line-height: 36rpx;
				color: #000000;
				font-size: 28rpx;
			}
		}
	}
</style>