antissoft / antissoft.shangten.wechar

<template>
	<view>
		<image src="../../static/beijing.png" class="background" mode=""></image>
		<!-- top头部 -->
		<view style="display: flex;">
			<view class="appointmentDetails">
				<view class="one1" v-if="modellist[0].CarModel==undefined">
					暂无预约信息
				</view>
				<view class="one1" v-if="modellist[0].CarModel!=undefined">
					预约详情
				</view>
				<view v-if="modellist[0].CarModel!=undefined">
					<view class="one2">
						{{modellist[0].CarModel==undefined?'暂无预约车型':'预约车型:'+modellist[0].CarModel}}
					</view>
					<view class="one2">
						{{modellist[0].MakeTime==undefined?'暂无预约时间':'预约时间:'+modellist[0].MakeTime}}
					</view>
					<view class="one2">
						{{modellist[0].Address==undefined?'暂无预约地点':'预约地点:'+modellist[0].Address}}
					</view>
				</view>
			</view>
			<view class="one1" @click="ExsitRecord" v-show="isshowRecord==0"
				style="width: 80px;position: absolute;top:25px;right:0px;">取消预约</view>
				<view class="one1" @click="UserComment" v-show="isshowComment==0"
					style="width: 80px;position: absolute;top:25px;right:0px;">用户评价</view>
		</view>
		<!-- 免费预约 -->
		<view class="content" @click="makeAnAppointment">
			<view class="logo">
				<image src="../../static/xiaoqiche.png" mode=""></image>
			</view>
			<view class="logo-1">免费预约</view>
		</view>
		<!-- 查看套餐 -->
		<view class="viewpackage" hover-class="bg-light" v-if="isshowVip==0">
			<view class="leftview">
				<view class="ballon" style="font-weight: 700;font-size:10px;color:#f2e2ac;">》》》》》》》</view>
			</view>
			<view class="centerview" style="display: flex;align-items: center;" @click="RedirectContent">
				<view class="viewpackage-0">
					<image class="viewpackage-1" src="../../static/1.png" mode=""></image>
				</view>
				<text class="viewpackage-2" style="color: #f2e2ac;font-size: 20px;">VIP特权卡激活</text>
			</view>
			<view class="ballon" style="font-weight: 700;font-size: 10px;color:#f2e2ac;">《《《《《《《</view>

		</view>
		<!-- 养护套餐 -->
		<view class="packagedetails">
			<view class="packagedetails-0">
				{{modelmeallist[0].title==null?'暂无标题':modelmeallist[0].title}}
			</view>
			<view class="packagedetails-1">
				{{modelmeallist[0].meal==null?'':modelmeallist[0].meal}}
			</view>
		</view>
		<!-- 最新预约 -->
		<!-- ---------------------------- -->
		<view class="button">
			<view>
				<!-- <view class="main"> -->
				<view class="button-0">
					最新预约
				</view>
				<view class="body">
					<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
						:duration="duration" :vertical="true" circular="true" :display-multiple-items="5"
						style=" border: 1px solid #524530;border-radius: 10px;padding-top: 5px;">
						<swiper-item class="button-1" v-for="(item,index) in data" :key="index">
							<view class="swiper-item uni-bg-red appointmentName" style="display: flex;margin: 0 auto;"
								:style="item.ReservationStatus=='已完成'?'color: #f2e2ac':'color:white'">
								<view style="width: 25%;">{{item.userName}}</view>
								<view style="width: 25%;">{{item.phone}}</view>
								<view style="width: 25%;">{{item.carModel}}</view>
								<view style="width: 25%;">{{item.ReservationStatus}}</view>
							</view>
						</swiper-item>

					</swiper>
				</view>

			</view>

		</view>
	</view>
</template>

<script>
	import utils from '../../service/utils.js'
	import maoScroll from '@/components/mao-scroll/mao-scroll.vue';
	export default {
		components: {
			maoScroll
		},
		data() {
			return {
				indicatorDots: false,
				autoplay: true,
				interval: 1000,
				duration: 500,
				title: 'Hello',
				data: [],
				count: 30,
				showNum: 5,
				lineHeight: 60,
				animationScroll: 1000,
				animation: 1000,
				// 机器人
				robotmodel: {
					pageIndex: 1,
					pageSize: 50,
					sort: '',
					sortOrder: '',
					keyword: ''
				},
				VeModel: {
					"UserId": 0,
					"KeyWord": "",
					"TotalCount": 0,
					"PageIndex": 1,
					"PageSize": 20,
					"Sort": [{
						"Field": "",
						"Type": 0
					}]
				},
				WxInfo: {
					"ParentUserId": 0,
					"InviteeUserId": 0,
					"beijintupian": "",
					"birthday": "",
					"ID_card": "",
					"address": "",
					"id": 0,
					"username": "",
					"password": "",
					"author": "",
					"status": "",
					"type": 0,
					"full_name": "",
					"add_time": "2022-01-25T09:57:09.828Z",
					"update_time": "2022-01-25T09:57:09.828Z",
					"remark": "",
					"avatar": "",
					"phone": "",
					"updphone": "",
					"openid": "",
					"sex": "",
					"balance": 0
				},
				// 最新预约
				model: {
					"UserId": 0,
					"KeyWord": "",
					"TotalCount": 0,
					"PageIndex": 1,
					"PageSize": 1,
					"Sort": [{
						"Field": "AddTime",
						"Type": 1
					}]
				},
				modelmeal: {
					"KeyWord": "",
					"TotalCount": 0,
					"PageIndex": 1,
					"PageSize": 1,
					"Sort": [{
						"Field": "Add_time",
						"Type": 1
					}]
				},
				modelmeallist: [],
				// 最新预约
				modellist: [],
				// 取消预约
				recordmodel: {
					id: 0,
					state: 0
				},
				// 0--展示取消预约按钮   1---隐藏取消预约按钮
				isshowRecord: 1,
				// 0--展示评价按钮   1---隐藏评价预约按钮
				isshowComment:1,
				// 0--展示VIP特权  1---隐藏VIP特权
				isshowVip:1,
				// 取消预约发送实体
				SendModel: {
					"param": "",
					"mobile": ""
				}
			}
		},
		onLoad(data) {
			this.createData()
			// this.IsLogin()
			this.ShowMeal()
			let self = this;
			// setTimeout(function() {
			// 	console.log('模拟从网上获取数据 花费了1秒');
			// 	console.log(self.data, '获取到的数据');
			// }, 1000);
		},
		onShow() {
			// 展示最新预约
			this.ShowNewYuYue()
			// 机器人列表
		},
		methods: {
			RedirectContent() {
				uni.navigateTo({
					url: '../indexContent/indexContent',
				})
			},
			// 取消预约发送短信
			ExsitSendSms(params, mobile) {
				
				this.SendModel.param = params
				this.SendModel.mobile = mobile
				this.API.SendCancelAppointment(this.SendModel).then(res => {
					console.log('取消预约发送数据', res)
					if (res.data.data.code == '000000') {
						console.log('短信发送成功')
					} else {
						console.log('短信发送失败')
					}
				})
			},
			// 取消预约  0--已预约  1--已取消   2--已完成
			ExsitRecord() {
				console.log('modellistaaaaaaaaa', this.modellist)
				if (this.modellist.length == 0) {
					console.log('没有预约')
					return
				}
				if (this.modellist[0].State == 0) {
					let jsonstorage = uni.getStorageSync('userinfo').data
					this.recordmodel.id = jsonstorage.id
					this.recordmodel.state = 1
					this.API.UpdateState(this.recordmodel).then(res => {
						console.log('取消预约返回值', res)
						if (res.data.code == 200) {
							let that = this
							this.API.AddPersonByDate({
								dates: this.modellist[0].MakeTime
							}).then(res => {
								console.log('加以', res)
								if (res.data.code == 200) {
									uni.showToast({
										title: '预约取消成功',
										icon: 'success',
										success() {
											that.ExsitSendSms('', jsonstorage.phone)
										}
									})

									this.isshowRecord = 1
								} else {
									uni.showToast({
										title: res.data.message,
										icon: 'none'
									})
								}
							})
							this.modellist = []
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							})
						}
					})
				} else if (this.modellist[0].State == 2) {
					uni.showToast({
						title: '该订单已完成，不可取消',
						icon: 'none'
					})
				} else {
					uni.showToast({
						title: '该订单已经取消',
						icon: 'none'
					})
				}
			},
			// 用户评价跳转
			UserComment(){
				uni.navigateTo({
					url:'../evaluate/resultEvaluate/resultEvaluate'
				})
			},
			//展示最新套餐
			ShowMeal() {
				this.API.GetListRichTextmeal(this.modelmeal).then(res => {
					console.log('res最新预约', res)
					this.modelmeallist = res.data.data.rows
				})
			},
			// 展示最新预约情况
			ShowNewYuYue() {
				let jsonstorage = uni.getStorageSync('userinfo').data
				console.log('缓存数据',jsonstorage)
				if(jsonstorage!=undefined){
				this.model.UserId = jsonstorage.id
				this.API.GetRecordById(this.model).then(res => {
					console.log('resaaa', res)
					res.data.data.rows.forEach((item, index) => {
						item.AddTime = utils.formatTime(item.AddTime, "yyyy-MM-dd")
						item.MakeTime = utils.formatTime(item.MakeTime, "yyyy-MM-dd ")
					})
					if(res.data.data.rows.length==0){
						this.isshowComment=1
					}
					if (res.data.data.rows[0].State == 0) {
						// 已预约
						this.modellist = res.data.data.rows
						this.isshowRecord = 0
						this.isshowComment=1
					} else if(res.data.data.rows[0].State==2){
						this.modellist = []
						// 已完成
						this.isshowRecord = 1
						this.isshowVip=0
						this.isshowComment=0
					}
					
					console.log('modelist最新预约', this.modellist)
				})
				}else{
					
				}
			},
			// 判断是否授权登录
			IsLogin() {
				let jsonstorage = uni.getStorageSync('userinfo')
				if (jsonstorage == undefined || jsonstorage == '' || jsonstorage == null) {
					uni.redirectTo({
						url: '../login/login',
					})
					return
				}
			},
			// 获取用户头像
			GetUserInfo() {
				let jsonstorage = uni.getStorageSync('userinfo').data
				if(jsonstorage!=undefined){
				let that = this
				uni.getUserProfile({
					desc: '获取头像',
					success(res) {
						console.log('获取信息', res)
						let datainfo = JSON.parse(res.rawData)
						console.log('daainfo', datainfo)
						that.WxInfo.id = jsonstorage.id
						that.WxInfo.beijintupian = datainfo.avatarUrl
						that.WxInfo.username = datainfo.nickName
						that.UpdInfo()
					}
				})
				}else{}
			},
			// 修改用户信息
			UpdInfo() {
				let jsonstorage = uni.getStorageSync('userinfo')
				let that = this
				this.API.UpdateWXUserInfo(that.WxInfo).then(res => {
					console.log('res修改', res)
					jsonstorage.data.username = res.data.data.username
					jsonstorage.data.beijintupian = res.data.data.beijintupian
					uni.setStorageSync('userinfo', jsonstorage)
				})
			},
			makeAnAppointment() {
				this.IsLogin()
				this.GetUserInfo()
				let jsonstorage = uni.getStorageSync('userinfo').data
				// this.modellist 存用户最新预约数据
				if (this.modellist.length != 0) {
					if (this.modellist[0].State == 0) {
						uni.showToast({
							title: '您还有未完成的预约',
							icon: 'none'
						})
						return;
					}
				}
				// if (jsonstorage.username == '未设置名称' || jsonstorage.username == '' || jsonstorage.phone == '' || jsonstorage
				// 	.phone == null) {
				// 	uni.showToast({
				// 		title: '请完善信息在预约',
				// 		icon: 'none',
				// 	})
				// 	setTimeout(() => {
				// 		uni.navigateTo({
				// 			url: '../personalinfo/personalinfo'
				// 		})
				// 	}, 1000)
				// } else {
					this.VeModel.UserId = jsonstorage.id
					this.API.GetVehicleListByUser(this.VeModel).then(res => {
						console.log('res', res)
						if (res.data.data.total > 0) {
							uni.navigateTo({
								url: '../preservation/preservation'
							})
						} else {
							uni.navigateTo({
								url: '../makeAnAppointment/makeAnAppointment'
							});
						}
					})
				// }

			},
			createData() {
				this.API.ListRobot(this.robotmodel).then(res => {
					res.data.data.forEach((item, index) => {
						item.phone = item.phone.substr(0, 3) + '****' + item.phone.substr(7)
					})
					this.data = res.data.data
				})

			}
		}
	}
</script>

<style lang="scss">
	.centerview{
		-webkit-animation-name: scaleDrawC;
		/*关键帧名称*/
		-webkit-animation-timing-function: ease-in-out;
		/*动画的速度曲线*/
		-webkit-animation-iteration-count: infinite;
		/*动画播放的次数*/
		-webkit-animation-duration: 2s;
	}
	@keyframes scaleDrawC {
	
		/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
		0% {
			transform: scale(1);
			/*开始为原始大小*/
		}
	
		25% {
			transform: scale(1.1);
			/*放大1.1倍*/
		}
	
		50% {
			transform: scale(1.2);
		}
	
		75% {
			transform: scale(1);
		}
	}
	
	.ballon {
		
		-webkit-animation-name: scaleDraw;
		/*关键帧名称*/
		-webkit-animation-timing-function: ease-in-out;
		/*动画的速度曲线*/
		-webkit-animation-iteration-count: infinite;
		/*动画播放的次数*/
		-webkit-animation-duration: 2s;
		/*动画所花费的时间*/
		
	}

	// @keyframes scaleDraw {

	// 	/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
	// 	0% {
	// 		transform: scale(1);
	// 		/*开始为原始大小*/
	// 	}

	// 	25% {
	// 		transform: scale(1.5);
	// 		/*放大1.1倍*/
	// 	}

	// 	50% {
	// 		transform: scale(1.8);
	// 	}

	// 	75% {
	// 		transform: scale(1);
	// 	}
	// }



	.wsui-btn__hover_list:active {
		opacity: 0.9;
		background-color: red;
	}

	/* 背景图片 */
	.background {
		width: 100%;
		height: 100%;
		position: fixed;
		background-size: 100% 100%;
		z-index: -1;
	}

	/* top头部 */
	.appointmentDetails {
		padding-top: 50rpx;
		padding-left: 33rpx;
		width: calc(100% - 20px);
		margin: auto;
		/* margin-top: 23px; */
		line-height: 30rpx;
	}

	.bg-light {
		background-color: white;
		color: red;
		opacity: 0.5;
		border-radius: 20px;
		padding: 0px 5px 0px 5px;
	}

	.one1 {
		color: #f9e9b1;
		font-size: 26rpx;
		font-weight: bold;
	}

	.one2 {
		color: #FFFFFF;
		font-size: 22rpx;
		margin-top: 13rpx;
	}

	/* 免费预约*/
	.content {
		width: 324rpx;
		height: 324rpx;
		margin: 81rpx auto;
		margin-bottom: 0;
		border-radius: 162rpx;
		background-image: url(../../static/aa0.png);
		background-size: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 1;
	}

	.logo {
		height: 82rpx;
		width: 103rpx;
		margin-bottom: 25rpx;
	}

	.logo image {
		width: 100%;
		height: 100%;
	}

	.logo-1 {
		color: #FFFFFF;
		font-size: 38rpx;
		width: 156rpx;
		height: 38rpx;
	}

	/* 查看套餐 */
	.viewpackage {
		// width: 288rpx;
		height: 60rpx;
		margin: 26rpx auto;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.viewpackage-0 {
		width: 28rpx;
		height: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.viewpackage-1 {
		width: 100%;
		height: 100%;

	}

	.viewpackage-2 {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		font-size: 22rpx;
	}

	/* 套餐详情 */
	.packagedetails {
		width: 712rpx;
		height: 308rpx;
		border: 2rpx solid #524530;
		border-radius: 50rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		/* justify-content: space-around; */
		align-items: center;
		margin-top: 20px;

	}

	.packagedetails-0 {
		width: 360rpx;
		height: 28rpx;
		color: #f4e8b1;
		line-height: 28rpx;
		text-align: center;
		font-size: 26rpx;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.packagedetails-1 {
		width: 604rpx;
		height: 188rpx;
		letter-spacing: 6rpx;
		color: #FFFFFF;
		font-family: PingFang-SC-Bold;
		font-size: 20rpx;
		line-height: 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		letter-spacing: 7rpx;
		/* margin-top: 24rpx; */

	}

	/* +最新预约 */
	.button {
		width: 712rpx;
		height: 308rpx;
		margin: 27rpx auto;
		// border: 2rpx solid #524530;
	}

	.button-0 {
		width: 106rpx;
		height: 26rpx;
		text-align: center;
		margin: 18rpx auto;
		color: #f2e2ac;
		font-size: 26rpx;
	}

	.button-1 {
		width: 90%;
		// height: 80%;
		margin: 0 auto;
		justify-content: space-between;
		overflow: hidden;

		>view {
			height: 30rpx;
			font-size: 22rpx;
			text-align: center;
			line-height: 30rpx;
			margin-top: 20rpx;
			color: #FFFFFF;
		}
	}

	.body {
		margin-top: 50rpx;
	}

	.appointmentName>view {
		margin-left: 20px;
		margin-right: 20px;
	}

	/* 最新预约资料 */
	// .appointmentName {

	// 	background-color: #007AFF;
	// }

	// .appointmentTelephone {
	// 	background-color: #008000;
	// }

	// .reserveAVehicle {
	// 	background-color: #8A6DE9;
	// }

	// .makeAnAppointment {
	// 	background-color: #AD1212;
	// }


	// 滑动
	// .main {
	// 	width: 100%;
	// 	height: 100%;
	// }
</style>