flavorOfTimeSz/pages/user/user.vue

<template>
	<view class="bg bg-padding">
		<image class="top-image" src="https://static.ticket.sz-trip.com/uploads/20251011/50e0ae7f09f23c278cab8472b6e99c07.png"></image>
		
		<view class="main-content">
			<view class="topBox" >
				<view class="avatar-box" @click="gotoProfile">
					<image :src="showImg(userInfo.avatar)" mode="aspectFill" class="headImg" v-if="userInfo.avatar"></image>
					<image src="https://static.ticket.sz-trip.com/yandu/images/user/grxx.png" mode="aspectFill"
						class="headImg" v-else></image>
					<view class="username w-full" style="display: flex;align-items: center;" v-if="userInfo.nickname">
						<view class="text-overflow" style="max-width: 300rpx;padding-right: 12rpx;">{{userInfo.nickname}}</view>
						<image class="flex-shrink-0" style="width: 24rpx;height: 24rpx;" src="https://static.ticket.sz-trip.com/uploads/20251011/5b8d4b5d6e0aefe9deddbc4ca8799264.png"></image>
					</view>
					<view class="username" v-else>请登录/注册 ></view>
				</view>
					
				<view class="flex-column-center">
					<view class="title">优惠券</view>
					<view class="num">7</view>
				</view>
				<view style="height: 35rpx;width: 2rpx;background:#E3E3E3;"></view>
				<view class="flex-column-center">
					<view class="title">积分</view>
					<view class="num">0</view>
				</view>
				
			</view>
			
			<view class="orderBox">
				<navigator :url="'/subPackages/order/trades'" class="moreBox flex-between">
					我的订单
					<span class="flex-between">
						全部订单
						<image src="https://static.ticket.sz-trip.com/uploads/20251011/b0d85d510903fdd7f18c29b4ba375bf6.png" mode=""></image>
					</span>
				</navigator>
			
				<view style="margin-top: 30rpx;display: flex;flex-wrap: wrap;">
					<view class="orderItem" v-for="(item,index) in orderList" :key="index" @click="goTrades(item)">
						<img :src="item.src" alt="">
						<view>{{item.title}}</view>
					</view>
				</view>
				<!-- 待付款轮播 -->
				<!-- <swiper class="my-swipe" :autoplay="3000" indicator-color="white" v-if="dfkList && dfkList.length>0" circular>
					<swiper-item v-for="(item,index) in dfkList" :key="item.id">
						<div class="dfkBox" @click="goToOrderDetail(item)">
							<image :src="showImg(item.order_child[0].specifications_image)" mode="aspectFill"></image>
							<div class="contentBox">
								<div style="width:300rpx;">
									<div style="font-size: 27rpx;margin-bottom: 10rpx;">等待付款 </div>
									<div style="display: flex;color: #8A8A8A;font-size: 27rpx;">剩余时间：<uni-countdown class="countdown" @timeup="timeup(index)" :show-day="false" :hour="differTimeList[index].slice(0,2)" :minute="differTimeList[index].slice(3,5)" :second="differTimeList[index].slice(6,8)"/></div>
								</div>
								<div class="orderBtn" @click.stop="setOrderId(item.order_id)">去支付</div>
							</div>
						</div>
					</swiper-item>
				</swiper> -->
			</view>
			
			
			<view class="cygj">
				<view class="moreBox">我的服务</view>
				
				<view  style="display:flex;align-items:center;flex-wrap:wrap">
					<view :class="['cyItem',item.customClass]" v-for="(item,index) in cyList.filter(x=>x.isShow)" :key="index"
					@click="gotoUrl(item,index)">
						<img :src="item.src" class="headIcon">
						<view>{{item.title}}</view>
					</view>
				</view>
			</view>
			
		</view>
		
		


		
		<!-- 图片 -->
		<uni-popup ref="popup" type="center">
			<image class="consult-popup" :src="showImg" :show-menu-by-longpress="true"></image>
		</uni-popup>
		
		<uni-popup ref="kfpopup" type="bottom" :safe-area="false">
			<view class="kf-popup-content">
			        <!-- 标题栏 -->
			        <view class="popup-header">
			          <text class="title">联系我们</text>
			          <text class="close-icon" @click="$refs.kfpopup.close()">×</text>
			        </view>
			        
			        <!-- 内容区域 -->
			        <view class="popup-body">
			          <!-- 电话咨询 -->
			          <view class="contact-item" @click="clickPhone('15370135755')">
			            <view class="info">
			              <text class="label">电话咨询</text>
			              <text class="detail">15370135755</text>
			            </view>
			            <view class="arrow">
							<image style="width: 100%;height: 100%;" mode="aspectFill" src="https://static.ticket.sz-trip.com/uploads/20250911/a58432ad47582207f9f03ac31a6e2d98.png"></image>
						</view>
			          </view>
			          
			          <!-- 在线客服 -->
			          <button class="concat-btn" open-type="contact" bindcontact="handleContact" session-from="sessionFrom">
			            <view class="contact-item">
						
			            <view class="info">
			              <text class="label">在线客服</text>
			              <text class="detail">工作时间: 9:00-18:00</text>
			            </view>
			            <view class="arrow">
							<image style="width: 100%;height: 100%;" mode="aspectFill" src="https://static.ticket.sz-trip.com/uploads/20250911/11761e83954ecb845a8c9ea26e95c6e0.png"></image>
						</view>
						</view>
			          </button>
			        </view>
			      </view>
			
		</uni-popup>
		
		
		<CustomTabBar :currentTab="4" />
	</view>
</template>

<script>
	import CustomTabBar from '@/components/CustomTabBar.vue';
	export default {
		components: {
			CustomTabBar
		},
		data() {
			return {
				dfkList: [],
				differTimeList: [],
				nowDateTime: '', //当前时间秒数
				userInfo: {},
				orderList: [{
						src: 'https://static.ticket.sz-trip.com/uploads/20251011/785234bf4df1fac233ee020627cdc262.png',
						title: '待付款',
						status: 'WAIT_PAYMENT'
					},
					{
						src: 'https://static.ticket.sz-trip.com/uploads/20251011/806d65eb846e60a98352ba09d8660ce7.png',
						title: '待发货',
						status: 'WAIT_POST'
					},
					{
						src: 'https://static.ticket.sz-trip.com/uploads/20251011/f3ea0d6a80ae0e10be1b974ad10955fb.png',
						title: '待使用/出行',
						status: 'WAIT_USE'
					},
					{
						src: 'https://static.ticket.sz-trip.com/uploads/20251011/4c0812afada05c7005c213a9f012955e.png',
						title: '待收货',
						status: 'WAIT_DELIVERY'
					},
					{
						src: 'https://static.ticket.sz-trip.com/uploads/20251011/7a0bc28efe4ef85d3c2ed98277afcd00.png',
						title: '退款/售后',
						status: 'NEED_REFUND'
					},
				],
				cyList: [
					{
						src: 'https://static.ticket.sz-trip.com/uploads/20251011/aa4ad71297f5b96b0f14696143a38ea1.png',
						title: '优惠券',
						path: '/subPackages/user/coupon',
						isShow: true
					},
					{
						src: 'https://static.ticket.sz-trip.com/uploads/20251011/19fff40782bc7d9a9c78ed5c394dc030.png',
						title: '出行人',
						path: '/subPackages/user/travelerList?showType=0',
						isShow: true
					},
					{
						src: 'https://static.ticket.sz-trip.com/uploads/20251011/c9c81700bc66a8d4dc26757aa6737dfa.png',
						title: '收货地址',
						path: '/subPackages/user/travelerList?showType=1',
						isShow: true
					},
					{
						src: 'https://static.ticket.sz-trip.com/uploads/20251011/c7e34c9011fc80966520b2c06a4faaf5.png',
						title: '商户核销',
						path: '',
						isShow: true,
						webUrl: "https://supplier-h5.sutenong.com",
					},
					{
						src: 'https://static.ticket.sz-trip.com/uploads/20251011/5d884b6d3abf2d38fdffa928795184a7.png',
						title: '积分商城',
						path: '',
						isShow: true,
					},
					{
						src: 'https://static.ticket.sz-trip.com/uploads/20251011/8020e99149c493a838c2b136560509ec.png',
						title: '联系客服',
						path: '',
						isShow: true,
						isKeFU: true,
					},
					{
						src: 'https://static.ticket.sz-trip.com/uploads/20251011/bcd540021d5ee3bc4051b9116299c9df.png',
						title: '公众号',
						path: '',
						isShow: true,
						GZHImg: "https://static.ticket.sz-trip.com/uploads/20251011/40183cb1d655217642c34da3baea4e28.jpg"
					},
					{
						src: 'https://static.ticket.sz-trip.com/uploads/20251011/a1c19ffa332ff9a5de9fcc983874baea.png',
						title: '进群抽奖',
						path: '',
						isShow: true,
						customClass: "prize",
					},
					
					
					{
						src: 'https://static.ticket.sz-trip.com/uploads/20251011/c6c29ace07206eec5418fb51068fa4ca.png',
						title: '用户协议',
						path: '/subPackages/user/privacyInfo?id=9',
						isShow: true
					},
					{
						src: 'https://static.ticket.sz-trip.com/uploads/20251011/b22eac8abd4639fa166195f91c78c6e6.png',
						title: '隐私管理',
						path: '/subPackages/user/privacyInfo?id=12',
						isShow: true
					}
				],
				showImg: "",
			}
		},
		onShow() {
			// 根据token获取个人信息
			// this.Post({
			// 	token: ''
			// },'/api/uservice/user/getMyInfo').then(res => {
			// 	this.$store.commit('changeUserInfo', res.data);
			// })
			
			this.userInfo = (uni.getStorageSync('userInfo') && JSON.parse(uni.getStorageSync('userInfo'))) || this.$store.state.user.userInfo || {}
			console.log(this.userInfo)
			uni.setStorageSync('isFlag', true)
			// this.dfkList = []
			// this.nowDateTime = parseInt(new Date().getTime() / 1000)
			// this.Post({}, "/api/user/userInfo").then((res) => {
			// 	if (res.data) {
			// 		this.userInfo = res.data;
			// 		// this.getDfk()

			// 		// 是否展示商户核销
			// 		this.Post({},'/api/merchants/is_merchant').then(res => {
			// 			this.cyList[6].isShow = res.data
			// 		})
			// 	}
			// });
		},
		// 导航栏点击事件
		onTabItemTap() {
			this.qdTracker('navButtonClick', {buttonName: '我的', buttonSort: '3'})
		},
		methods: {
			// 个人信息或登录
			gotoProfile() {
				// 有token去个人信息，没有去登录
				if(this.userInfo.token) {
					uni.navigateTo({
						url: '/subPackages/user/profile'
					})
				}else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			timeup(index) {
				// return this.dfkList.splice(index,1)
			},
			setOrderId(id) {
				let that = this;
				that.orderId = id;
				that.Post({
						order_id: id,
						pay_method: 'WEIXIN',
						pay_platform: "MINI",
					},
					'/api/pay/unify'
				).then(res => {
					if (res.data) {
						uni.requestPayment({
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							paySign: res.data.paySign,
							signType: res.data.signType,
							timeStamp: res.data.timeStamp
						});
					}
				});
			},
			// 待付款
			getDfk() {
				this.differTimeList = []
				let params = {
					offset: this.dfkList.length,
					limit: 10,
					status: 'WAIT_PAYMENT',
				}
				this.Post(params, '/api/order/orderList').then(res => {
					this.isLoading = false
					if (res) {
						this.dfkList = [...this.dfkList, ...res.data]
						this.dfkList.forEach(item => {
							// 获取时间差,订单关闭时间-当前时间，若存在即展示倒计时differTimeList
							let del;
							if (moment(item.close_time).diff(moment()) > 0) {
								del = moment.utc(moment(item.close_time).diff(moment())).format('HH:mm:ss')
							} else {
								del = '00:00:00'
							}
							this.differTimeList.push(del)
						})
						console.log(this.differTimeList);
						console.log('this.differTimeList：' + this.differTimeList[0].slice(0, 2))
					}
				})
			},
			goToOrderDetail(item) {
				uni.navigateTo({
					url: '/subPackages/order/detail?id=' + item.order_id
				});
			},
			getChild(list) {
				let arr = []
				for (let i = 0; i < list.length; i++) {
					if (list[i].product_model == "ticket") {
						console.log(list[i]);
						arr.push(list[i])
						break
					}
				}
				console.log(arr);
				if (arr.length > 0) {
					return arr[0]
				} else {
					return list[0]
				}

			},
			goCoupon() {
				uni.navigateTo({
					url: "/subPackages/user/coupon",
				});
			},
			goKeFu() {
				uni.navigateTo({
					url: "/subPackages/publicservices/ServiceOnline",
				});
			},
			// open(){
			//   this.$refs.popup.open('center')
			// },
			gotoUrl(item, index) {
				if (item.path) {
					uni.navigateTo({
						url: item.path
					})
					return
				}
				if (item.webUrl) {
					uni.navigateTo({
						url:'/subPackages/webPage/webPage?url='+item.webUrl
					})
					return
				}
				if (item.isKeFU) {
					this.$refs.kfpopup.open()
					return;
				}
				if (item.GZHImg) {
					this.showImg = item.GZHImg;
					this.$refs.popup.open()
					return
				}
				
				this.qidai()
				
			},
			qidai() {
				uni.showToast({
					title: '功能建设中...',
					icon: 'none'
				})
			},
			goTrades(item) {
				if (item) {
					uni.navigateTo({
						url: "/subPackages/order/trades?type=" + item.title,
					});
				} else {
					uni.navigateTo({
						url: "/subPackages/order/trades",
					});
				}
			},
			//判断是否关注公众号
			isGz(item) {
				this.$refs.pop.openPop(
					'https://yjks.oss-cn-shanghai.aliyuncs.com/uploads/20230517/db9eb60e0abfea8be1075b406fefe551.jpg');
				// this.Post({}, '/api/wechat/getSubcribeInfo').then(res => {
				// 	if (res.data) {
				// uni.navigateTo({
				// 	url:'/subPackages/webPage/webPage?url='+'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzU2NjQwNTYxNg==#wechat_redirect'
				// })
				// 	} else {
				// console.log(this.$refs.pop);
				// 	}
				// });
			},
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .uni-countdown {
		font-size: 20px !important;

		::v-deep .uni-countdown__splitor {
			font-size: 20px !important;
		}
	}

	.bg {
		min-height: 100vh;
		overflow-x: hidden;
	}
	.top-image{
		width: 100%;
		height: 453.43rpx;
		display: block;
	}
	.main-content{
		width: 750rpx;
		background: linear-gradient( 180deg, #FFFFFF 0%, #F1F2F4 100%);
		border-radius: 43rpx 43rpx 0rpx 0rpx;
		position: relative;
		margin-top: -50rpx;
		padding: 38rpx 27rpx;
	}

	.topBox {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		position: relative;
		overflow: visible;
		.avatar-box {
			height: 80rpx;
			position: relative;
			display: flex;
			flex-direction: column;
			width: 100rpx;
			flex: 1;
			margin-left: 28rpx;
			padding-top: 30rpx;
			.headImg{
				width: 133rpx;
				height: 133rpx;
				border: 4rpx solid #FFFFFF;
				border-radius: 50%;
				flex-shrink: 0;
				position: absolute;
				left: 0;
				top: -115rpx;
			}
		}
		.flex-column-center{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			height: 80rpx;
			flex-shrink: 0;
			min-width: 150rpx;
			.title{
				font-weight: 400;
				font-size: 24rpx;
				color: #535355;
			}
			.num{
				font-family: DIN Condensed, DIN Condensed;
				font-weight: bold;
				font-size: 37rpx;
				color: #6A8C29;
			}
		}
		


		.username {
			font-weight: 500;
			font-size: 32rpx;
			color: #1C1C1C;
		}
		
		.top-right {
			font-weight: 500;
			font-size: 25rpx;
			color: #100E0E;
			
			image {
				width: 11.33rpx;
				height: 20rpx;
				margin-left: 18rpx;
			}
		}
	}

	.orderBox {
		width: 697rpx;
		border-radius: 13rpx;
		margin: 30rpx auto 0;
		background: #F9FFF4;
		border-radius: 21rpx 21rpx 21rpx 21rpx;
		border: 1rpx solid #DAF7A2;
		position: relative;
		padding: 26rpx 0;

		.moreBox {
			padding:0 29rpx;
			margin: auto;
			font-weight: 500;
			font-size: 32rpx;
			color: #1C1C1C;
			align-items: baseline;
			span {
				font-weight: 400;
				font-size: 24rpx;
				color: #8D8D8D;
				box-sizing: border-box;

				image {
					width: 20rpx;
					height: 20rpx;
					margin-left: 8rpx;
				}
			}
		}

		.orderItem {
			font-weight: 400;
			font-size: 24rpx;
			color: #535355;
			width: 20%;
			text-align: center;

			img {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 12rpx;
			}
		}
		.orderItem:nth-child(n+6) {
			margin-top: 28rpx;
		}
	}

	.cygj {
		width: 697rpx;
		background: #FFFFFF;
		border-radius: 21rpx 21rpx 21rpx 21rpx;
		margin: 20rpx auto 0;
		padding: 27rpx 0;
		font-weight: 500;
		font-size: 32rpx;
		color: #1C1C1C;
		
		.moreBox{
			padding:0 29rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #1C1C1C;
			margin-bottom: 28rpx;
		}

		.cyItem {
			width:25%;
			display: flex;
			align-items: center;
			flex-direction:column;
			font-weight: 400;
			font-size: 24rpx;
			color: #535355;
			margin-bottom:28rpx;

			.headIcon {
				width: 48rpx;
				height: 48rpx;
				margin-bottom:10rpx;
			}

		}
		
		.prize.cyItem{
			color: #F47736;
		}
	}

	.my-swipe {
		// width: 100%;
		margin: 0 30rpx;
		margin-top: 37.3rpx;
	}

	swiper {
		height: 111rpx !important;
	}

	.dfkBox {
		width: 100%;
		height: 111rpx;
		background: #F7F7F7;
		margin: 0 auto 30.64rpx;
		// padding: 0.25rem;
		display: flex;
	}

	.dfkBox image {
		width: 137rpx;
		height: 111rpx;
		border-radius: 13rpx;
		flex-shrink: 0;
		// margin-right: 16.7rpx;
	}

	.dfkBox .contentBox {
		padding-left: 5rpx;
		padding-right: 5rpx;
		height: 111rpx;
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	// .van-count-down{
	// 	font-size: 0.39rem;
	// 	font-family: PingFang SC;
	// 	font-weight: 400;
	// 	color: #FB6E4D;
	// }

	.orderBtn {
		width: 152rpx;
		height: 56rpx;
		background: linear-gradient(270deg, #FC5109, #FDC43A);
		;
		border-radius: 28rpx;
		text-align: center;
		line-height: 56rpx;
		font-size: 27rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		// margin-left: 50rpx;
		// margin-right: 20rpx;
	}

	#contact {
		-webkit-tap-highlight-color: transparent;
		background-color: rgba(0, 0, 0, 0);
		border-radius: 0;
		box-sizing: border-box;
		color: transparent;
		cursor: pointer;
		overflow: hidden;
		padding: 0;
		position: relative;
		text-align: center;
		text-decoration: none;
		border: transparent 0px solid;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	button::after {
		border: none;
		background-color: rgba(0, 0, 0, 0);
	}

	.more {
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, .5);
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;

		image {
			width: 646rpx;
			height: 959rpx;
		}

		img {
			width: 80rpx;
			height: 80rpx;
		}
	}
	
	.consult-popup {
		width: 480rpx;
		height: 480rpx;
		border-radius: 25rpx;
	}
	
/* 弹窗内容容器 */
.kf-popup-content {
  width: 100%;
  background-color: #fff;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  overflow: hidden;
  .popup-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    position: relative;
    border-bottom: 1px solid #f5f5f5;
  }
  .title {
    font-size: 18px;
    font-weight: bold;
  }
  
  .close-icon {
    position: absolute;
    right: 16px;
    font-size: 20px;
    color: #999;
  }
  
  /* 弹窗内容区 */
  .popup-body {
    padding: 10px 0;
  }
  
  /* 联系项样式 */
  .contact-item {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f5f5f5;
  }
  

  
  .info {
    flex: 1;
  }
  
  .label {
    font-size: 16px;
    display: block;
    margin-bottom: 4px;
  }
  
  .detail {
    font-size: 14px;
    color: #666;
  }
  
  .arrow {
	width: 20px;
	height: 20px;
    color: #ccc;
    font-size: 18px;
  }
}

.concat-btn{
  /* 清除默认背景和边框 */
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  
  /* 清除默认圆角 */
  border-radius: 0;
  
  /* 清除默认文字样式 */
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  
  /* 清除点击效果（灰色背景） */
  -webkit-tap-highlight-color: transparent;
  text-align: left;
}



</style>