10 changed files with 892 additions and 380 deletions
			
			
		| @ -0,0 +1,386 @@ | |||
| <template> | |||
| 	<view> | |||
| 		<!-- 日历 --> | |||
| 		<view class="calendar"> | |||
| 			<view class="calendar-top flex-between"> | |||
| 				<view @click="preNextDate(0)"> | |||
| 					<img src="https://static.ticket.sz-trip.com/tourGuide/images/index/leftIcon.png" class="iconfont" | |||
| 						style="margin-right: 13rpx;" /> | |||
| 					{{ monthShow ? '上一月' : '上一周' }} | |||
| 				</view> | |||
| 				<view>{{year}}年{{month}}月</view> | |||
| 				<view @click="preNextDate(1)"> | |||
| 					{{ monthShow ? '下一月' : '下一周' }} | |||
| 					<img src="https://static.ticket.sz-trip.com/tourGuide/images/index/rightIcon.png" class="iconfont" | |||
| 						style="margin-left: 13rpx;" /> | |||
| 				</view> | |||
| 			</view> | |||
| 		 | |||
| 			<view class="calendar-bottom"> | |||
| 				<view class="week-item" v-for="(item,index) in weekList" :key="item + index"> | |||
| 					{{item}} | |||
| 				</view> | |||
| 		 | |||
| 				<view v-for="(item, index) in everyDay" :key="item.day + index" class="day-box flex-center" | |||
| 					:class="(nowDay > item.date) ? 'grayDate' : ''" v-if="monthShow"> | |||
| 					<view :class="['day-item', selectDay == item.date ? 'daySelect' : '']" | |||
| 						@click="changeDate(item.date)"> | |||
| 						{{ nowDay== item.date ? '今日' : item.day }} | |||
| 						<view class="day-lunar" v-if="isShowLunar">{{showLunar(item)}}</view> | |||
| 						<view class="day-point" v-else></view> | |||
| 						<!-- <view class="day-point" v-if="(item.day && selectDay != item.date) && item.flag && !isShowLunar"></view> --> | |||
| 					</view> | |||
| 				</view> | |||
| 		 | |||
| 				<view v-for="(item, index) in weekDates" :key="item + index" class="day-box flex-center" | |||
| 					:class="(nowDay > getNowTime(item)) ? 'grayDate' : ''" v-if="!monthShow"> | |||
| 					<view :class="['day-item', selectDay == getNowTime(item) ? 'daySelect' : '']" | |||
| 						@click="changeDate(getNowTime(item))"> | |||
| 						{{ nowDay == getNowTime(item) ? '今日' : getNowTime(item).slice(-2) }} | |||
| 						<view class="day-lunar" v-if="isShowLunar">{{showLunar(getNowTime(item))}}</view> | |||
| 						<view class="day-point" v-if="(item.day && selectDay != item.date) && item.flag && !isShowLunar"></view> | |||
| 					</view> | |||
| 				</view> | |||
| 		 | |||
| 				<view class="" style="width: 100%;height: 50rpx;padding: 20rpx;" @click="changeWeekMonth"> | |||
| 					<img :src="monthShow ? 'https://static.ticket.sz-trip.com/hsrNewTown/images/calendar/top.png' : 'https://static.ticket.sz-trip.com/hsrNewTown/images/calendar/bottom.png'" | |||
| 						class="iconfont" /> | |||
| 				</view> | |||
| 			</view> | |||
| 		</view> | |||
| 	</view> | |||
| </template> | |||
| 
 | |||
| <script> | |||
| 	import { | |||
| 		lunar | |||
| 	} from "../static/js/lunar.js" | |||
| 	export default { | |||
| 		props: { | |||
| 			isShowLunar: { | |||
| 				type: Boolean, | |||
| 				default: false  | |||
| 			}, | |||
| 		}, | |||
| 		data() { | |||
| 			return { | |||
| 				weekList: ['日', '一', '二', '三', '四', '五', '六'], | |||
| 				monthShow: false, | |||
| 				year: 0, | |||
| 				month: 0, | |||
| 				day: 0, | |||
| 				week: '', | |||
| 				nowDay: '', | |||
| 				selectDay: '', | |||
| 				everyDay: [], | |||
| 				weekDates: [], | |||
| 			} | |||
| 		}, | |||
| 		mounted() { | |||
| 			this.year = Number(this.getNowTime(new Date(), 2).slice(0, 4)); | |||
| 			this.month = Number(this.getNowTime(new Date(), 2).slice(5, 7)); | |||
| 			this.day = Number(this.getNowTime(new Date(), 2).slice(8, 10)); | |||
| 			this.nowDay = this.getNowTime(new Date()) | |||
| 			this.selectDay = this.getNowTime(new Date()) | |||
| 			this.getWeekDates(new Date()) | |||
| 		}, | |||
| 		methods: { | |||
| 			// 选中日期 | |||
| 			changeDate(item) { | |||
| 				if (this.nowDay <= item) { | |||
| 					this.year = Number(item.slice(0, 4)); | |||
| 					this.month = Number(item.slice(5, 7)); | |||
| 					this.day = Number(item.slice(8, 10)); | |||
| 					this.selectDay = item | |||
| 					 | |||
| 					this.$emit('changeDate', this.selectDay) | |||
| 				} | |||
| 			}, | |||
| 			// 农历 | |||
| 			showLunar(date) { | |||
| 				if(this.monthShow) { | |||
| 					if (!date.date) return; | |||
| 					var lunarObj = lunar.solar2lunar(date.date.slice(0, 4), date.date.slice(5, 7), date.date.slice(8, 10)); | |||
| 				}else { | |||
| 					var lunarObj = lunar.solar2lunar(date.slice(0, 4), date.slice(5, 7), date.slice(8, 10)); | |||
| 				} | |||
| 			 | |||
| 				return lunarObj.festival || lunarObj.lunarFestival || lunarObj.IDayCn; | |||
| 			}, | |||
| 			// 获取当前日期 | |||
| 			getNowTime(time, type) { | |||
| 				var date = time, | |||
| 					year = date.getFullYear(), | |||
| 					month = date.getMonth() + 1, | |||
| 					day = date.getDate(), | |||
| 					hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(), | |||
| 					minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(), | |||
| 					second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); | |||
| 				month >= 1 && month <= 9 ? (month = "0" + month) : ""; | |||
| 				day >= 0 && day <= 9 ? (day = "0" + day) : ""; | |||
| 				if (type == 1) { | |||
| 					if (uni.getSystemInfoSync().platform == 'ios') { | |||
| 						var timer = year + '/' + month + '/' + day + ' ' + hour + ':' + minute + ':' + second; | |||
| 					} else { | |||
| 						var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second; | |||
| 					} | |||
| 				} else { | |||
| 					var timer = year + '/' + month + '/' + day; | |||
| 				} | |||
| 			 | |||
| 				return timer; | |||
| 			}, | |||
| 			// 遍历月份日期 | |||
| 			getEveryDay(data) { | |||
| 				let date = new Date(data); | |||
| 				let month = date.getMonth(); | |||
| 				//设置月份 | |||
| 				date.setMonth(month + 1); | |||
| 				//设置一个月的某一天-这里设置为零则取到的日期中的天就会是当月的最后一天(比如,二月份就是28或29,其他月份就是30或31),方便下边的循环 | |||
| 				date.setDate(0); | |||
| 				let dayArry = []; | |||
| 				let day = date.getDate(); //获取当前月最后一天是几号 | |||
| 				for (let i = 1; i <= day; i++) { | |||
| 					date.setDate(i); //如果只获取当前选择月份的每一天,则不需要date.setDate(i)只需dayArry.push(i)即可,其中date.setDate(i)是设置当前月份的每一天 | |||
| 					dayArry.push({ | |||
| 						day: i, | |||
| 						week: this.getWeekday(date.getDay()), | |||
| 						date: this.getNowTime(date), | |||
| 						flag: 0 | |||
| 					}); //选中月份的每一天和当天是星期几 | |||
| 				} | |||
| 			 | |||
| 				this.everyDay = dayArry; | |||
| 				this.resetDay(); | |||
| 			}, | |||
| 			getWeekday(day) { | |||
| 				return ['日', '一', '二', '三', '四', '五', '六'][day]; | |||
| 			}, | |||
| 			//重置日期与顶部周期相对应 | |||
| 			resetDay() { | |||
| 				let arr = this.weekList; | |||
| 				let w = this.everyDay[0].week; | |||
| 				arr.forEach((v, index) => { | |||
| 					if (v == w) { | |||
| 						let id = index; | |||
| 						if (id != 0) { | |||
| 							for (let i = 0; i < id; i++) { | |||
| 								this.everyDay.unshift({ | |||
| 									day: '', | |||
| 									week: '' | |||
| 								}); | |||
| 							} | |||
| 						} | |||
| 					} | |||
| 				}); | |||
| 			}, | |||
| 			// 获取周 | |||
| 			getWeekDates(day) { | |||
| 				const currentDayOfWeek = day.getDay(); // 获取今天是星期几( 0 = 周日,...6 = 周六 | |||
| 				const startDate = new Date(day); | |||
| 				startDate.setDate(day.getDate() - currentDayOfWeek); | |||
| 				const weekDates = []; | |||
| 				for (let i = 0; i < 7; i++) { | |||
| 					const date = new Date(startDate); | |||
| 					date.setDate(startDate.getDate() + i); | |||
| 					weekDates.push(date) | |||
| 				} | |||
| 				this.weekDates = weekDates | |||
| 			}, | |||
| 			// 切换上一周月、下一周月 | |||
| 			preNextDate(e) { | |||
| 				if (this.monthShow) { | |||
| 					if (e) { | |||
| 						// 下一月 | |||
| 						this.month += 1; | |||
| 						if (this.month > 12) { | |||
| 							this.year += 1; | |||
| 							this.month = 1; | |||
| 						} | |||
| 						if (uni.getSystemInfoSync().platform == 'ios') { | |||
| 							this.getEveryDay(this.year + '/' + this.month + '/' + 1); | |||
| 						} else { | |||
| 							this.getEveryDay(this.year + '-' + this.month); | |||
| 						} | |||
| 					} else { | |||
| 						// 上一月 | |||
| 						this.month -= 1; | |||
| 						if (this.month == 0) { | |||
| 							this.year -= 1; | |||
| 							this.month = 12; | |||
| 						} | |||
| 						if (uni.getSystemInfoSync().platform == 'ios') { | |||
| 							this.getEveryDay(this.year + '/' + this.month + '/' + 1); | |||
| 						} else { | |||
| 							this.getEveryDay(this.year + '-' + this.month); | |||
| 						} | |||
| 					} | |||
| 				} else { | |||
| 					if (e) { | |||
| 						// 下一周 | |||
| 						this.getNextWeekDates() | |||
| 					} else { | |||
| 						// 上一周 | |||
| 						this.getPreviousWeekDates() | |||
| 					} | |||
| 				} | |||
| 			}, | |||
| 			getPreviousWeekDates() { | |||
| 				const today = this.weekDates[0] | |||
| 				const previousWeekStartDate = new Date(today); | |||
| 				previousWeekStartDate.setDate(today.getDate() - 7); // 上周的开始日期 | |||
| 			 | |||
| 				const previousWeekDates = []; | |||
| 				for (let i = 0; i < 7; i++) { | |||
| 					const date = new Date(previousWeekStartDate); | |||
| 					date.setDate(previousWeekStartDate.getDate() + i); | |||
| 					previousWeekDates.push(date); | |||
| 				} | |||
| 			 | |||
| 				this.weekDates = previousWeekDates; | |||
| 				this.year = Number(this.getNowTime(this.weekDates[0], 2).slice(0, 4)); | |||
| 				this.month = Number(this.getNowTime(this.weekDates[0], 2).slice(5, 7)); | |||
| 			}, | |||
| 			getNextWeekDates() { | |||
| 				const today = this.weekDates[0] | |||
| 				const nextWeekStartDate = new Date(today); | |||
| 				nextWeekStartDate.setDate(today.getDate() + 7); // 下周的开始日期 | |||
| 			 | |||
| 				const nextWeekDates = []; | |||
| 				for (let i = 0; i < 7; i++) { | |||
| 					const date = new Date(nextWeekStartDate); | |||
| 					date.setDate(nextWeekStartDate.getDate() + i); | |||
| 					nextWeekDates.push(date); | |||
| 				} | |||
| 			 | |||
| 				this.weekDates = nextWeekDates; | |||
| 				this.year = Number(this.getNowTime(this.weekDates[0], 2).slice(0, 4)); | |||
| 				this.month = Number(this.getNowTime(this.weekDates[0], 2).slice(5, 7)); | |||
| 			}, | |||
| 			// 更换周/月 | |||
| 			changeWeekMonth() { | |||
| 				this.monthShow = !this.monthShow | |||
| 			 | |||
| 				this.month = Number(this.selectDay.slice(5, 7)); | |||
| 			 | |||
| 				if (this.monthShow) { | |||
| 					this.year = Number(this.selectDay.slice(0, 4)) | |||
| 					if (uni.getSystemInfoSync().platform == 'ios') { | |||
| 						this.getEveryDay(this.year + '/' + this.month + '/' + 1); | |||
| 					} else { | |||
| 						this.getEveryDay(this.year + '/' + this.month); | |||
| 					} | |||
| 				} else { | |||
| 					this.getWeekDates(new Date(this.selectDay)) | |||
| 				} | |||
| 			}, | |||
| 		} | |||
| 	} | |||
| </script> | |||
| 
 | |||
| <style lang="scss" scoped> | |||
| 	.calendar { | |||
| 		.calendar-top { | |||
| 			font-size: 27rpx; | |||
| 			font-family: PingFang SC; | |||
| 			font-weight: 500; | |||
| 			color: #000000; | |||
| 			padding: 59rpx 0 38rpx; | |||
| 	 | |||
| 			view:nth-child(2) { | |||
| 				font-size: 35rpx; | |||
| 				font-weight: bold; | |||
| 			} | |||
| 	 | |||
| 			.iconfont { | |||
| 				width: 11rpx; | |||
| 				height: 20rpx; | |||
| 				vertical-align: inherit; | |||
| 			} | |||
| 		} | |||
| 	 | |||
| 		.calendar-bottom { | |||
| 			display: flex; | |||
| 			flex-wrap: wrap; | |||
| 			padding: 33rpx 0 40rpx; | |||
| 			width: 697rpx; | |||
| 			height: auto; | |||
| 			background: #FFFFFF; | |||
| 			border-radius: 20rpx; | |||
| 			position: relative; | |||
| 	 | |||
| 			.week-item { | |||
| 				width: 14%; | |||
| 				text-align: center; | |||
| 				font-size: 24rpx; | |||
| 				font-family: PingFang SC; | |||
| 				font-weight: 500; | |||
| 				color: #666666; | |||
| 			} | |||
| 	 | |||
| 			.day-box { | |||
| 				width: 14%; | |||
| 				height: 100rpx; | |||
| 				display: flex; | |||
| 				align-items: center; | |||
| 				justify-content: center; | |||
| 	 | |||
| 				.day-item { | |||
| 					font-size: 29rpx; | |||
| 					font-family: PingFang SC; | |||
| 					font-weight: 500; | |||
| 					color: #000000; | |||
| 					display: flex; | |||
| 					flex-direction: column; | |||
| 					justify-content: space-around; | |||
| 					text-align: center; | |||
| 					 | |||
| 					.day-lunar { | |||
| 						font-weight: 500; | |||
| 						font-size: 17rpx; | |||
| 						color: #999999; | |||
| 						text-align: center; | |||
| 					} | |||
| 					 | |||
| 					.day-point{ | |||
| 						width: 5rpx; | |||
| 						height: 5rpx; | |||
| 						background: #FF3615; | |||
| 						border-radius: 50%; | |||
| 						margin: 5rpx auto 0; | |||
| 					} | |||
| 				} | |||
| 	 | |||
| 				.daySelect { | |||
| 					width: 80rpx; | |||
| 					height: 80rpx; | |||
| 					text-align: center; | |||
| 					background: #96684F; | |||
| 					border-radius: 27rpx; | |||
| 					color: #fff; | |||
| 					 | |||
| 					.day-lunar { | |||
| 						color: #fff; | |||
| 					} | |||
| 				} | |||
| 			} | |||
| 	 | |||
| 			.grayDate { | |||
| 				.day-item { | |||
| 					color: #999999; | |||
| 					 | |||
| 					.day-point{ | |||
| 						background: #CCCCCC; | |||
| 					} | |||
| 				} | |||
| 			} | |||
| 	 | |||
| 			.iconfont { | |||
| 				width: 20rpx; | |||
| 				height: 20rpx; | |||
| 				display: block; | |||
| 				margin: 0 auto; | |||
| 			} | |||
| 		} | |||
| 	} | |||
| </style> | |||
| @ -0,0 +1,135 @@ | |||
| <template> | |||
| 	<view class="bg"> | |||
| 		<div class="box"> | |||
| 			<view class="box-title">订单详情</view> | |||
| 			<view class="item"> | |||
| 				<view class="title">下单日期:</view> | |||
| 				<view class="subtitle">{{detail.a}}</view> | |||
| 			</view> | |||
| 			<view class="item"> | |||
| 				<view class="title">订单号:</view> | |||
| 				<view class="subtitle">{{detail.b}}</view> | |||
| 			</view> | |||
| 		</div> | |||
| 		 | |||
| 		<div class="box"> | |||
| 			<view class="box-title" style="text-align: left;">产品信息</view> | |||
| 			<view class="item"> | |||
| 				<view class="title">产品类型:</view> | |||
| 				<view class="subtitle">{{detail.c}}</view> | |||
| 			</view> | |||
| 			<view class="item"> | |||
| 				<view class="title">产品类型:</view> | |||
| 				<view class="subtitle">{{detail.d}}</view> | |||
| 			</view> | |||
| 			<view class="item"> | |||
| 				<view class="title">产品类型:</view> | |||
| 				<view class="subtitle">{{detail.e}}</view> | |||
| 			</view> | |||
| 			<view class="item"> | |||
| 				<view class="title">产品类型:</view> | |||
| 				<view class="subtitle">{{detail.f}}</view> | |||
| 			</view> | |||
| 		</div> | |||
| 		 | |||
| 		<div class="box"> | |||
| 			<view class="box-title" style="text-align: left;">订单信息</view> | |||
| 			<view class="item"> | |||
| 				<view class="title">下单日期:</view> | |||
| 				<view class="subtitle">{{detail.g}}</view> | |||
| 			</view> | |||
| 			<view class="item"> | |||
| 				<view class="title">订单号:</view> | |||
| 				<view class="subtitle">{{detail.h}}</view> | |||
| 			</view> | |||
| 			<view class="item"> | |||
| 				<view class="title">订单号:</view> | |||
| 				<view class="subtitle">{{detail.i}}</view> | |||
| 			</view> | |||
| 			<view class="item"> | |||
| 				<view class="title">订单号:</view> | |||
| 				<view class="subtitle">{{detail.j}}</view> | |||
| 			</view> | |||
| 			<view class="item"> | |||
| 				<view class="title">出行人手机号1:</view> | |||
| 				<view class="subtitle">{{detail.k}}</view> | |||
| 			</view> | |||
| 			<view class="item"> | |||
| 				<view class="title">订单号:</view> | |||
| 				<view class="subtitle">{{detail.l}}</view> | |||
| 			</view> | |||
| 			<view class="item"> | |||
| 				<view class="title">订单号:</view> | |||
| 				<view class="subtitle">{{detail.m}}</view> | |||
| 			</view> | |||
| 		</div> | |||
| 	</view> | |||
| </template> | |||
| 
 | |||
| <script> | |||
| 	export default { | |||
| 		data() { | |||
| 			return { | |||
| 				detail: { | |||
| 					a: '2024-11-23', | |||
| 					b: 'JD85212456964232', | |||
| 					c: '产品类型产品类型产品类型产品类型', | |||
| 					d: '产品名称产品名称产品名称产品名称 产品名称', | |||
| 					e: '规格名称规格名称规格名称规格名称', | |||
| 					f: '800元', | |||
| 					g: '2', | |||
| 					h: '1600元', | |||
| 					i: '2024-11-23', | |||
| 					j: '于冰', | |||
| 					k: '15036660000', | |||
| 					l: '孙宁', | |||
| 					m: '13188889999', | |||
| 				} | |||
| 			} | |||
| 		} | |||
| 	} | |||
| </script> | |||
| 
 | |||
| <style lang="scss" scoped> | |||
| 	.bg { | |||
| 		min-height: 100vh; | |||
| 		background: #F5F5F5; | |||
| 		padding: 50rpx 26rpx; | |||
| 	} | |||
| 	 | |||
| 	.box { | |||
| 		padding: 30rpx 26rpx; | |||
| 		background: #FFFFFF; | |||
| 		border-radius: 13rpx; | |||
| 		margin-bottom: 30rpx; | |||
| 		 | |||
| 		.box-title { | |||
| 			text-align: center; | |||
| 			font-weight: bold; | |||
| 			font-size: 32rpx; | |||
| 			color: #000000; | |||
| 		} | |||
| 		 | |||
| 		.item { | |||
| 			margin-top: 20rpx; | |||
| 			display: flex; | |||
| 			 | |||
| 			.title { | |||
| 				min-width: 210rpx; | |||
| 				font-weight: 500; | |||
| 				font-size: 28rpx; | |||
| 				color: #000000; | |||
| 			} | |||
| 			 | |||
| 			.subtitle { | |||
| 				font-weight: 500; | |||
| 				font-size: 28rpx; | |||
| 				color: #646464; | |||
| 				 | |||
| 				span { | |||
| 					color: #96684F; | |||
| 				} | |||
| 			} | |||
| 		} | |||
| 	} | |||
| </style> | |||
| @ -0,0 +1,163 @@ | |||
| <template> | |||
| 	<view class="bg"> | |||
| 		<view class="search-box flex-center"> | |||
| 			<image src="https://static.ticket.sz-trip.com/tourGuide/images/order/search.png" mode=""></image> | |||
| 			<input type="text" placeholder="输入订单号搜索" v-model="keywords" /> | |||
| 			<view class="search-btn" @click="getList"> | |||
| 				搜索 | |||
| 			</view> | |||
| 		</view> | |||
| 		 | |||
| 		<calendarVue :isShowLunar="false" @changeDate="getList"></calendarVue> | |||
| 		 | |||
| 		<view class="box" v-for="(item, index) in list" :key="index"> | |||
| 			<view class="box-title">订单详情</view> | |||
| 			<view class="item"> | |||
| 				<view class="title">下单日期:</view> | |||
| 				<view class="subtitle">{{item.a}}</view> | |||
| 			</view> | |||
| 			<view class="item"> | |||
| 				<view class="title">订单号:</view> | |||
| 				<view class="subtitle">{{item.b}}</view> | |||
| 			</view> | |||
| 			<view class="item"> | |||
| 				<view class="title">状态:</view> | |||
| 				<view class="subtitle"><span>{{item.c}}</span></view> | |||
| 			</view> | |||
| 			<view class="item"> | |||
| 				<view class="title">产品类型:</view> | |||
| 				<view class="subtitle">{{item.d}}</view> | |||
| 			</view> | |||
| 			<view class="item"> | |||
| 				<view class="title">产品名称:</view> | |||
| 				<view class="subtitle">{{item.e}}</view> | |||
| 			</view> | |||
| 			<view class="item"> | |||
| 				<view class="title">预定人手机号:</view> | |||
| 				<view class="subtitle">{{item.f}}</view> | |||
| 			</view> | |||
| 		</view> | |||
| 		 | |||
| 		<view class="empty-text"> | |||
| 			暂无订单数据 | |||
| 		</view> | |||
| 	</view> | |||
| </template> | |||
| 
 | |||
| <script> | |||
| 	import calendarVue from '../../components/calendar.vue'; | |||
| 	export default { | |||
| 		components: {calendarVue}, | |||
| 		data() { | |||
| 			return { | |||
| 				list: [ | |||
| 					{ | |||
| 						a: '2024-11-23', | |||
| 						b: 'JD85212456964232', | |||
| 						c: '出票成功', | |||
| 						d: '产品类型产品类型产品类型产品类型 产品类型', | |||
| 						e: '产品名称产品名称产品名称产品名称 产品名称产品名称产品名称产品', | |||
| 						f: '16099998888' | |||
| 					}, | |||
| 					{ | |||
| 						a: '2024-11-23', | |||
| 						b: 'JD85212456964232', | |||
| 						c: '出票成功', | |||
| 						d: '产品类型产品类型产品类型产品类型 产品类型', | |||
| 						e: '产品名称产品名称产品名称产品名称 产品名称产品名称产品名称产品', | |||
| 						f: '16099998888' | |||
| 					} | |||
| 				], | |||
| 				keywords: '' | |||
| 			} | |||
| 		}, | |||
| 		methods: { | |||
| 			getList() { | |||
| 				 | |||
| 			} | |||
| 		} | |||
| 	} | |||
| </script> | |||
| 
 | |||
| <style lang="scss" scoped> | |||
| 	.bg { | |||
| 		background: #F5F5F5; | |||
| 		min-height: 100vh; | |||
| 		padding: 50rpx 26rpx 50rpx; | |||
| 	} | |||
| 	 | |||
| 	.search-box { | |||
| 		width: 697rpx; | |||
| 		height: 93rpx; | |||
| 		background: #FFFFFF; | |||
| 		border-radius: 47rpx; | |||
| 		padding: 0 40rpx 0 26rpx; | |||
| 		 | |||
| 		image { | |||
| 			width: 42.67rpx; | |||
| 			height: 42.67rpx; | |||
| 			margin-right: 23rpx; | |||
| 		} | |||
| 		 | |||
| 		input { | |||
| 			font-weight: 400; | |||
| 			font-size: 27rpx; | |||
| 			color: #717171; | |||
| 			flex: 1; | |||
| 		} | |||
| 		 | |||
| 		.search-btn { | |||
| 			padding-left: 40rpx; | |||
| 			line-height: 64rpx; | |||
| 			border-left: 1rpx solid #717171; | |||
| 			font-weight: 400; | |||
| 			font-size: 27rpx; | |||
| 			color: #0B898E; | |||
| 			margin-left: 23rpx; | |||
| 		} | |||
| 	} | |||
| 	 | |||
| 	.box { | |||
| 		padding: 50rpx 26rpx; | |||
| 		background: #FFFFFF; | |||
| 		border-radius: 13rpx; | |||
| 		margin-top: 30rpx; | |||
| 		 | |||
| 		.box-title { | |||
| 			text-align: center; | |||
| 			font-weight: 500; | |||
| 			font-size: 32rpx; | |||
| 			color: #000000; | |||
| 		} | |||
| 		 | |||
| 		.item { | |||
| 			margin-top: 20rpx; | |||
| 			display: flex; | |||
| 			 | |||
| 			.title { | |||
| 				min-width: 200rpx; | |||
| 				font-weight: 500; | |||
| 				font-size: 28rpx; | |||
| 				color: #000000; | |||
| 			} | |||
| 			 | |||
| 			.subtitle { | |||
| 				font-weight: 500; | |||
| 				font-size: 28rpx; | |||
| 				color: #646464; | |||
| 				 | |||
| 				span { | |||
| 					color: #96684F; | |||
| 				} | |||
| 			} | |||
| 		} | |||
| 	} | |||
| 	 | |||
| 	.empty-text { | |||
| 		font-weight: 500; | |||
| 		font-size: 40rpx; | |||
| 		color: #646464; | |||
| 		text-align: center; | |||
| 		margin: 30rpx 0; | |||
| 	} | |||
| </style> | |||
| @ -0,0 +1,50 @@ | |||
| <template> | |||
| 	<view class="bg"> | |||
| 		<view class="item flex-between"> | |||
| 			<view>登录账号</view> | |||
| 			<view>{{userInfo.mobile}}</view> | |||
| 		</view> | |||
| 		 | |||
| 		<view class="item flex-between"> | |||
| 			<view>密码</view> | |||
| 			<view>****** <image url="https://static.ticket.sz-trip.com/tourGuide/images/user/rightGray.png"></image></view> | |||
| 		</view> | |||
| 	</view> | |||
| </template> | |||
| 
 | |||
| <script> | |||
| 	export default { | |||
| 		data() { | |||
| 			return { | |||
| 				userInfo: {} | |||
| 			} | |||
| 		}, | |||
| 		onShow() { | |||
| 			this.userInfo = (uni.getStorageSync('userInfo') && JSON.parse(uni.getStorageSync('userInfo'))) || this.$store.state.user.userInfo || {} | |||
| 			console.log(this.userInfo) | |||
| 		} | |||
| 	} | |||
| </script> | |||
| 
 | |||
| <style lang="scss" scoped> | |||
| 	.bg { | |||
| 		min-height: 100vh; | |||
| 		background: #F5F5F5; | |||
| 		padding: 0 26rpx; | |||
| 	} | |||
| 	 | |||
| 	.item { | |||
| 		height: 110rpx; | |||
| 		font-weight: 500; | |||
| 		font-size: 28rpx; | |||
| 		color: #000000; | |||
| 		border-bottom: 1rpx solid #D8D8D8; | |||
| 		 | |||
| 		image { | |||
| 			width: 11.33rpx; | |||
| 			height: 20rpx; | |||
| 			margin-left: 20rpx; | |||
| 			vertical-align: middle; | |||
| 		} | |||
| 	} | |||
| </style> | |||
					Loading…
					
					
				
		Reference in new issue