psy_web_share/paymentPage/queryByPhone/index.vue

<template>
	<div class='phone-order'>
		<view class='query_tab'>
			<view :class="{'phone_query_tab':tabFlag=='phone','phone_query_tab_no':tabFlag=='order'}"
				@click.native='tabClick(1)'>
				<text
					:class="{'phone_query_tab_font':tabFlag=='phone','phone_query_tab_font_no':tabFlag=='order'}">用手机号查找</text>
			</view>
			<view :class="{'phone_query_tab':tabFlag=='order','phone_query_tab_no':tabFlag=='phone'}"
				@click.native='tabClick(2)'>
				<text
					:class="{'phone_query_tab_font':tabFlag=='order','phone_query_tab_font_no':tabFlag=='phone'}">用订单号查找</text>
			</view>
		</view>
		<div class='phone-class'>
			<div v-show="tabFlag=='phone'">
				<div class='phone_tip_t'>请输入支付时的手机号码，即可查看已付款的测试结果：</div>
				<div class='page-connent'>
					<div class='verification-phone'>
						<uni-easyinput class="uni-mt-5 verification-phone1" style='height:40px' trim="all"
							placeholder="请输入手机号" v-model='phone' placeholder-style="font-size:28rpx"></uni-easyinput>
					</div>
					<div class='verification-code'>
						<uni-easyinput class="uni-mt-5 verification-code1" placeholder="请输入验证码" v-model.number="code"
							placeholder-style="font-size:28rpx">
							<template #right><text
									style="margin-right:20px;background:#F8F6F7;line-height:35px;color:#03A2AD"
									@click='sendCode()'>{{sendCodeFlag}}</text></template>
						</uni-easyinput>
					</div>
					<view style='width:600rpx;text-align:right;color: #767676;font-size: 24rpx;margin-top:20rpx'>没收到验证码?
					</view>
					<!-- <div class='tip-des'>请输入您在支付时填的手机号~ 如未留下过手机号，请切换用订单号查询</div> -->
					<div><button class='phone-button' @click='immediateQuery(1)'>立即查询</button></div>
				</div>
			</div>
			<div v-show="tabFlag=='order'" style='padding-bottom:20px'>
				<div style='padding-top:10px;margin-left:10px;' class='order_tip_t'>请输入支付后的订单编号，即可查看已付款的测试结果：</div>
				<div class='verification-phone' style='padding-left:10px;padding-right: 10px;margin-top:60rpx;'>
					<uni-easyinput class="uni-mt-5 verification-phone1" trim="all" placeholder="请输入订单号号"
						v-model='orderNo' placeholder-style="font-size:28rpx"></uni-easyinput>
				</div>
				<view @click="dialogToggle"
					style='width: 600rpx; margin: 40rpx auto; text-align: right;color:#767676;font-size: 24rpx;'>
					不知道订单编号?</view>
				<div style='padding-left:10px;padding-right:10px;'><button class='phone-button'
						@click='immediateQuery(2)'>立即查询</button></div>
			</div>

		</div>
		<div class="history-all">
			<view class='main_scale_njhd'>
				<img class='main_xing_left' src="/static/images/xing_left2.png" />
				<view class='main_scale_font_njhd'>历史订单</view>
				<img class='main_xing_right' src="/static/images/xing_right2.png" />
			</view>

			<div v-for="(item ,index) in historyList " :key="index" class='history-tab'>
				<div class='history-name'>
					{{item.title}}
				</div>
				<div class='history-num'>
					<div>订单编号:</div>
					<div class='history-order-des'>{{item.orderNo}}</div>
				</div>
				<div class='history-status'>
					<div class='history-status-font'>订单状态:</div>
					<div class='history-status-des'>{{item.orderStatus}}</div>
				</div>
				<div class='view-report-out'><button class='view-report' @click="goResult(item.resultId)"
						size='mini'>立即查看</button></div>
			</div>
			<view><uni-load-more :status="status" /></view>
		</div>
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" confirmText="确定" title="提示" @confirm="dialogConfirm" @close="dialogClose">
				<image src="../../static/images/order_no.png" mode="widthFix" style="width: 600rpx;"></image>
			</uni-popup-dialog>
		</uni-popup>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				//more 上拉加载更多
				//loading  加载中
				//no-more 没有更多数据
				status: 'no-more',
				//订单编号
				orderNo: '',
				//点击手机号查看还是订单号查看
				tabFlag: 'phone',
				//手机号
				phone: '',
				code: '',
				verification: null,
				//时间标志
				time: null,
				//倒计时数字
				timeCount: 60,
				//显示倒计时还是发送验证码
				sendCodeFlag: '发送验证码',
				historyList: [

				],
				pageNum: 1,
				pageSize: 10
			}
		},
		onReachBottom() {
			console.log('滑动到距离底部100px的时候触发,可以放 。。业务逻辑');
		},
		methods: {
			tabClick(val) {
				if (val == 1) {
					this.tabFlag = 'phone'
				} else {
					this.tabFlag = 'order'
				}
			},
			//对订单号进行校验
			checkOrder() {
				if (this.orderNo == null || this.orderNo == '') {
					uni.showToast({
						title: '订单编号不能为空',
						icon: 'error'
					})
					return;
				}
			},
			//对手机号进行校验
			checkPhone() {
				var phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
				if (phoneReg.test(this.phone)) {
					return true;
				} else {
					uni.showToast({
						title: '请输入正确手机号',
						icon: 'error'
					})
					return false;
				}
			},
			// 校验短信验证码
			checkCode() {
				let reg = /^[0-9]\d{5}$/;
				if (reg.test(this.code)) {
					return true;
				} else {
					uni.showToast({
						title: '请输入6位短信验证码',
						icon: 'error'
					})
					return false;
				}
			},
			sendCode() {
				if (!this.checkPhone()) {
					return;
				}
				if (this.sendCodeFlag == '重新发送' || this.sendCodeFlag == '发送验证码') {
					this.timeCount = 60;
					clearInterval(this.time)
					//起一个定时器开始倒计时
					this.sendCodeFlag = this.timeCount + 's'
					this.time = setInterval(() => {
						this.timeCount -= 1;
						this.sendCodeFlag = this.timeCount + 's'
						//如果倒计时为0时则停止倒计时
						if (this.timeCount == 0) {
							clearInterval(this.time)
							this.sendCodeFlag = '重新发送'
						}
					}, 1000)
					this.$request.get({
						url: 'user/authCode',
						loadingTip: "加载中...",
						data: {
							phone: this.phone
						},
					}).then((res) => {
						if (res.code == 200) {
							this.verification = res.data;
							uni.showToast({
								title: '验证码已发送',
								icon: 'success',
							})
						}
					})
				}

			},
			immediateQuery(val) {
				if (val == '1') {
					//参数传输手机号和验证码，然后后台进行查询
					this.queryByphone();
				} else {
					//参数查询订单号，然后后台进行查询
					this.queryByorder();
				}
			},
			queryByphone() {
				if (this.checkPhone() && this.checkCode()) {
					this.$request.post({
						url: 'record/getRecordByModelPhone',
						loadingTip: "加载中...",
						data: {
							modelPhone: this.phone,
							authCode: this.code,
							pageNum: this.pageNum,
							pageSize: this.pageSize,
							verification: this.verification
						}
					}).then((res) => {
						if (res.data) {
							this.historyList = res.data.orderList;
						} else {
							this.historyList = [];
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					}).catch(err => {
						err = JSON.parse(err);
						uni.showToast({
							title: err.msg,
							icon: 'none'
						})
					})
				}
			},

			queryByorder() {
				if (!this.orderNo) {
					uni.showToast({
						icon: 'none',
						title: '请输入订单号'
					})
					return
				}
				this.$request.get({
					url: `api/orderInfo/queryOrderDetail/${this.orderNo}`,
					loadingTip: "加载中...",
					data: {

					}
				}).then((res) => {
					if (res.data) {
						this.historyList = [res.data];
					} else {
						this.historyList = [];
					}
				})
			},

			goResult(id) {
				uni.navigateTo({
					url: `/scaleTestResults/testResults/index?resultId=${id}&messageShare=1`
				})
			},

			dialogToggle(type) {
				this.msgType = type
				this.$refs.alertDialog.open()
			}
		}
	}
</script>

<style scoped>
	.phone-order {
		max-width: 750rpx;
		background: linear-gradient(180deg, #D8FFF2 0%, #46E2ED 42%, #BEFFE8 98%);
		padding-top: 30px;
		padding-left: 10px;
		padding-right: 10px;
		min-height: 100vh;
	}

	.phone-order-tab {
		z-index: 0;
		position: relative;
		display: flex;
		flex-direction: row;
	}

	.phone1 {
		position: absolute;
		width: 3.5rem;
		height: 1.2rem;
		background: url(../../static/images/phone1.png) no-repeat 50%;
		background-size: 100% 100%;
		left: 0;
	}

	.phone2 {
		position: absolute;
		width: 3.5rem;
		height: 1.1rem;
		z-index: -1;
		background: url(../../static/images/phone2.png) no-repeat 50%;
		background-size: 100% 100%;
		left: 0;
		top: 0.1rem;
	}

	.order1 {
		position: absolute;
		width: 3.5rem;
		height: 1.2rem;
		background: url(../../static/images/order1.png) no-repeat 50%;
		background-size: 100% 100%;
		right: 0;
	}

	.order2 {
		position: absolute;
		width: 3.5rem;
		height: 1.1rem;
		background: url(../../static/images/order2.png) no-repeat 50%;
		background-size: 100% 100%;
		z-index: -1;
		top: 0.1rem;
		right: 0;
	}

	.phone-1 {
		margin-top: 20px;
		margin-left: 15px;
		font-size: 18px;
		font-weight: 700;
	}

	.phone-2 {
		color: #a95842;
		margin-top: 18px;
		margin-left: 15px;
		font-size: 18px;
		font-weight: 700;
	}

	.order-1 {
		text-align: center;
		font-size: 18px;
		font-weight: 700;
	}

	.order-2 {
		color: #a95842;
		margin-top: 18px;
		margin-left: 40px;
		font-size: 18px;
		font-weight: 700;
	}

	.phone-class {
		background-color: #ffffff;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;

	}

	.page-connent {
		padding-top: 5px;
		padding-bottom: 20px;
		padding-left: 10px;
		padding-right: 10px;
		border-radius: 10px;
	}

	.verification-phone1>>>uni-view {
		width: 600rpx;
		height: 80rpx;
		background: #F8F6F7 !important;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		margin: 0 auto;
		border: none;
	}

	.verification-code1>>>uni-view {
		width: 600rpx;
		height: 80rpx;
		background: #F8F6F7 !important;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		margin: 0 auto;
		border: none;
	}

	.phone-button {
		width: 616rpx;
		background: linear-gradient(270deg, #00D8E7 0%, #069EBC 100%);
		box-shadow: inset 0rpx 0rpx 0rpx 0rpx rgba(47, 146, 255, 0.1936);
		border-radius: 73rpx 73rpx 73rpx 73rpx;
		opacity: 1;
		margin: 94rpx auto 60rpx;
		font-size: 32rpx;
		font-family: Source Han Sans-Regular, Source Han Sans;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 80rpx;
	}

	.verification-code {
		margin-top: 46rpx;
	}

	.verification-phone {
		margin-top: 20px;
	}

	.verification-phone>>>.content-clear-icon {
		color: #57eded !important;
		border: 0px;
	}

	.tip-des {
		padding-top: 10px;
		font-size: 10px;
	}

	.history-tip {
		display: flex;
		justify-content: center;
		margin-top: 10px;
		margin-bottom: 20px;
	}

	.history-name {
		color: #656C74;
		font-size: 16px;
		line-height: 23px;
		margin-bottom: 10px;
	}

	.history-tab {
		background-color: #ffffff;
		border-radius: 10px;
		padding-left: 10px;
		padding-top: 10px;
		padding-bottom: 10px;
		margin-bottom: 20px;
	}

	.history-num {
		display: flex;
		font-size: 14px;
		font-family: Source Han Sans-Regular, Source Han Sans;
		font-weight: 400;
		color: #656C74;
		line-height: 20px;
	}

	.history-status {
		margin-top: 5px;
		display: flex;
	}

	.history-status-des {
		margin-left: 10px;
		font-size: 14px;
		font-family: Source Han Sans-Regular, Source Han Sans;
		font-weight: 400;
		line-height: 20px;
		background-image: -webkit-linear-gradient(top, #bc2f08, #d75d10, #de6912);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.history-order-des {
		margin-left: 10px;
	}

	.view-report {
		margin-top: 10px;
		margin-left: unset;
		margin-right: 12px;
		color: #ffffff;
		background: #E1FDFF;
		border: 1px solid #069EBC;
		color: #069EBC;
		border-radius: 36px;
		height: 40px;
		font-size: 16px;
	}

	.view-report-out {
		display: flex;
		justify-content: flex-end;
	}

	.history-all {
		padding-bottom: 20px;
	}

	.query_tab {
		display: flex;
	}

	.phone_query_tab {
		flex: 1;
		background: linear-gradient(180deg, #FFFFFF, #D6F69F);
		height: 40px;
		text-align: center;
	}

	.phone_query_tab_no {
		flex: 1;
		background: linear-gradient(180deg, #FFFFFF, #E2E2E2);
		height: 40px;
		text-align: center;
	}

	.phone_query_tab_font {
		line-height: 40px;
		color: #03A2AD;
		font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 20px;
	}

	.phone_query_tab_font_no {
		line-height: 40px;
		color: #767676;
		font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 20px;
	}

	.phone_tip_t {
		font-size: 24rpx;
		font-family: Source Han Sans-Regular, Source Han Sans;
		font-weight: 400;
		color: #656C74;
		line-height: 34rpx;
		text-align: center;
		padding-top: 44rpx;
	}

	.order_tip_t {
		font-size: 24rpx;
		font-family: Source Han Sans-Regular, Source Han Sans;
		font-weight: 400;
		color: #656C74;
		line-height: 34rpx;
		text-align: center;
		margin: 60rpx 0;
	}

	.main_scale_njhd {
		margin-top: 39px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 20px;
	}

	.main_scale_font_njhd {
		font-size: 16px;
		font-family: AlibabaPuHuiTi-Heavy, AlibabaPuHuiTi;
		font-weight: 900;
		color: #000000;
		line-height: 30px;
	}

	.main_xing_left {
		height: 30px;
		weight: 20px;
		margin-right: 20px;
	}

	.main_xing_right {
		height: 30px;
		weight: 20px;
		margin-left: 20px;
	}

	.history-status-font {
		font-size: 14px;
		font-family: Source Han Sans-Regular, Source Han Sans;
		font-weight: 400;
		color: #656C74;
		line-height: 20px;
	}

	/deep/ .uni-easyinput__content {
		font-size: 32rpx;
	}

	/deep/ .uni-easyinput__content-input {
		font-size: 32rpx;
	}
</style>