changshu_WeChat/pages/user/user.vue

<template>
	<view class="bg">
		<view class="title">我的</view>

		<view class="topBox" @click="gotoProfile">
			<view class="avatar-box flex-center">
				<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>
			<view class="username" v-if="userInfo.nickname">{{userInfo.nickname}}</view>
			<view class="username" v-else>请登录/注册 ></view>
		</view>

		<view class="orderBox">
			<navigator :url="'/subPackages/order/trades'" class="moreBox flex-between">
				我的订单
				<span class="flex-between">全部订单 <img
						src="https://static.ticket.sz-trip.com/yandu/images/user/rightIcon.png" alt=""></span>
			</navigator>

			<view class="flex-around" style="margin-top: 20rpx;">
				<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="cyItem flex-between" v-for="(item,index) in cyList" :key="index"
				@click="gotoUrl(item,index)" v-if="item.isShow">
				<view class="flex-center">
					<img :src="item.src" class="headIcon">
					{{item.title}}
				</view>
				<img src="https://static.ticket.sz-trip.com/yandu/images/user/rightIcon-gray.png" class="rightIcon">
			</view>
			<!-- <button id="contact" class="cyItem flex-between" open-type="contact" bindcontact="handleContact" session-from="sessionFrom">
				<view class="flex-center">
					<img src="https://static.ticket.sz-trip.com/dongtai/images/user/zxkf.png" class="headIcon">
					在线客服
				</view>
				<img src="https://static.ticket.sz-trip.com/dongtai/images/user/rightIcon-gray.png" class="rightIcon">
			</button> -->
		</view>
		
		<!-- 旅游咨询弹框 -->
		<uni-popup ref="popup" type="center">
			<view class="consult-popup">
				即将跳转人工客服 
				<view class="consult-subtitle">服务时间：周一至周五<br>8:30-11:30，14:30-18:00</view>
				<view class="consult-btns">
					<view @click="$refs.popup.close()">取消</view>
					<!-- <view @click="clickPhone('0515-69186109')">确定</view> -->
					<view>
						<button class="confirm" open-type="contact">确定</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	// import moment from "moment";
	export default {
		data() {
			return {
				dfkList: [],
				differTimeList: [],
				nowDateTime: '', //当前时间秒数
				userInfo: {},
				orderList: [{
						src: 'https://static.ticket.sz-trip.com/yandu/images/user/dfk.png',
						title: '待付款',
						status: 'WAIT_PAYMENT'
					},
					{
						src: 'https://static.ticket.sz-trip.com/yandu/images/user/dfh.png',
						title: '待发货',
						status: 'PAYMENT_SUCCESSFULLY'
					},
					{
						src: 'https://static.ticket.sz-trip.com/yandu/images/user/dsh.png',
						title: '待收货',
						status: 'POST'
					},
					// {
					// 	src: 'https://static.ticket.sz-trip.com/yandu/images/user/dpj.png',
					// 	title: '待评价',
					// 	status: 'WAIT_COMMENT'
					// },
					{
						src: 'https://static.ticket.sz-trip.com/yandu/images/user/tksh.png',
						title: '退款/售后',
						status: 'WAIT_REFUND,REFUND_SUCCESS,REFUND_REFUSAL,REFUND_ERROR,REFUND_PART'
					},
				],
				cyList: [
					// {
					// 	src: 'https://static.ticket.sz-trip.com/yandu/images/user/grsc.png',
					// 	title: '个人收藏',
					// 	path: '/subPackages/user/collect',
					// 	isShow: true
					// },
					{
						src: 'https://static.ticket.sz-trip.com/yandu/images/user/yhq.png',
						title: '优惠券',
						path: '/subPackages/user/coupon',
						isShow: true
					},
					{
						src: 'https://static.ticket.sz-trip.com/yandu/images/user/cyxx.png',
						title: '常用信息',
						path: '/subPackages/user/travelerList',
						isShow: true
					},
					{
						src: 'https://static.ticket.sz-trip.com/yandu/images/user/lyzx.png',
						title: '旅游咨询',
						path: '',
						isShow: true
					},
					{
						src: 'https://static.ticket.sz-trip.com/yandu/images/user/tsjb.png',
						title: '投诉建议',
						path: '/subPackages/service/service',
						isShow: true
					},
					{
						src: 'https://static.ticket.sz-trip.com/yandu/images/user/ysgl.png',
						title: '隐私管理',
						path: '/subPackages/user/privacy',
						isShow: true
					}
				],
			}
		},
		onShow() {
			this.userInfo = (uni.getStorageSync('userInfo') && JSON.parse(uni.getStorageSync('userInfo'))) || this.$store.state.user.userInfo || {}
			console.log(this.userInfo)
			// 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
			// 		})
			// 	}
			// });
		},
		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,
						type: "miniprogram",
						platform: 'miniprogram'
					},
					'/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.title == "旅游咨询") {
					this.$refs.popup.open()
					return;
				}
				uni.navigateTo({
					url: item.path
				})
			},
			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">
	view{
		box-sizing: border-box;
	}
	/deep/.uni-countdown {
		font-size: 20px !important;

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

	.bg {
		min-height: 100vh;
		overflow-x: hidden;
		background: url('https://static.ticket.sz-trip.com/yandu/images/user/topBg.png') no-repeat;
		background-size: 100%;
		background-color: #F7F7F7;
		padding-bottom: 100rpx;
	}

	.title {
		font-weight: bold;
		font-size: 36rpx;
		color: #333333;
		position: absolute;
		top: 110rpx;
		left: 50%;
		transform: translate(-50%, 0);
	}

	.topBox {
		width: 750rpx;
		height: 373rpx;
		padding: 100rpx 0 0 26rpx;
		box-sizing: border-box;
		display: flex;
		margin-top: 90rpx;

		.avatar-box {
			width: 120rpx;
			height: 120rpx;
			background: #FFFFFF;
			border-radius: 50%;
			overflow: hidden;
		}

		.headImg {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
		}

		.username {
			margin: 40rpx 0 0 28rpx;
			font-weight: 500;
			font-size: 40rpx;
			color: #000000;
		}
	}

	.orderBox {
		width: 697rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 23rpx 0rpx rgba(80, 80, 80, 0.12);
		border-radius: 20rpx;
		margin: -48rpx auto 0;
		padding-bottom: 30.6rpx;

		.moreBox {
			height: 84rpx;
			margin: auto;
			font-size: 31rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #000000;
			padding-left: 26rpx;

			span {
				width: 173rpx;
				height: 40rpx;
				background: #D6F2F0;
				border-radius: 20rpx 0rpx 0rpx 20rpx;
				padding: 0 24rpx;
				font-size: 25rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #00AEA0;
				box-sizing: border-box;

				img {
					width: 20rpx;
					height: 20rpx;
				}
			}
		}

		.orderItem {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
			width: 20%;
			text-align: center;

			img {
				width: 62rpx;
				height: 62rpx;
				margin-bottom: 10rpx;
			}
		}
	}

	.lxwm {
		width: 696rpx;
		height: 447rpx;
		background: #FFFFFF;
		box-shadow: 0px 4rpx 12rpx 0px rgba(150, 149, 149, 0.3);
		border-radius: 20rpx;
		margin: auto;
		padding: 27rpx 19rpx 0 19rpx;
		font-size: 31rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;

		.midBox {
			padding: 26rpx 43rpx 21rpx 44rpx;
			box-sizing: border-box;

			img {
				width: 265rpx;
				height: 252rpx;
				border-radius: 15rpx;
			}
		}

		.botBox {
			padding: 0 30rpx 0 51rpx;
			font-size: 27rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #000000;
		}
	}

	.cygj {
		width: 697rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 30rpx auto 0;
		padding: 0 27rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		box-sizing: border-box;

		.cyItem {
			height: 106rpx;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #D8D8D8;

			.headIcon {
				width: 42rpx;
				height: 42rpx;
				margin-right: 15rpx;
			}

			.rightIcon {
				width: 20rpx;
				height: 20rpx;
			}
		}

		.cyItem:last-child {
			border: none;
		}
	}

	.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 27rpx;
		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: 487rpx;
		height: 367rpx;
		background: #F0F0F0;
		border-radius: 20rpx;
		padding: 65rpx 0 23rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #000000;
		text-align: center;
		
		.consult-subtitle {
			font-weight: 500;
			font-size: 27rpx;
			color: #333333;
			margin-top: 43rpx;
		}
		
		.consult-btns {
			display: flex;
			margin-top: 75rpx;
			
			view {
				width: 50%;
				font-weight: bold;
				font-size: 32rpx;
				color: #00AEA0;
				line-height: 54rpx;
			}
			view:first-child {
				border-right: 1rpx solid #D8D8D8;
				color: #000000;
			}
		}
	}

	.confirm{
		height: 58rpx;
		line-height: 58rpx;
		background: none;
		font-weight: bold;
		font-size: 32rpx;
		color: #00AEA0;
	}
</style>