wangluohuoyun_website/pages/index/index.vue

<template>
	<view class="">
		<top :type="pageType"></top>
		<view class="index-page">
			<view class="content1" :class="isSM?'bgc-sm':''">
				<view class="login" v-if="!isHaveUser||!hasLogin">
					<view class="row1">
						<view class="">
							登录
						</view>
						<view class="line">
						</view>
						<view class="sm" @click="smClick(1)" :class="isSM?'text-active':''">
							扫码登录
						</view>
						<view class="dx" @click="smClick(2)" :class="!isSM?'text-active':''">
							短信登录
						</view>
						<!-- <view class="left">
							{{isSM?'扫码登录':'短信登录'}}
						</view>
						<u-icon name="photo" color="#2979ff" size="60" class='ewm' @click="smClick"></u-icon> -->
					</view>
					<view class="bottom-view" v-if="!isSM">
						<view class="row2">
							<input placeholder="请输入手机号" v-model="phone" @change="change" maxlength="11"
								style="border: 1px solid #EBEBEB;height: 52px;font-size: 16px;padding:0 20px;width: 100%;">
							</input>
						</view>
						<view class="row2">
							<input placeholder="请输入验证码" v-model="verifyCode" @change="change"
								style="border: 1px solid #EBEBEB;height: 52px;font-size: 16px;padding:0 20px;width: 100%;">
							</input>
							<view class="wrap">
								<u-toast ref="uToast"></u-toast>
								<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange">
								</u-code>
								<view @tap="getCode" class="get-code">{{tips}}</view>
							</view>
						</view>
						<view class="row3">
							<u-button type="primary" text="确定" color="#2F54EF" class='btn' @click="submit"></u-button>
						</view>
					</view>
					<view class="ewm-style" v-if="isSM">
						<!-- <image src="../../static/ewm.png" mode="widthFix" class="img"></image> -->
						<div class="q-login">
							<div class="success-login" v-if="sessionStatus==3">
								√&nbsp;登录成功，{{username}}
							</div>
							<div class="qcode-img" v-else>
								<template v-if="sessionStatus==-2">
									<div class="qr-expire" @click="resetRefresh()">
										二维码过期,重新刷新
									</div>
								</template>
								<template v-else>
									<img :src="base64Code" class='erm-img' :class="sessionStatus==1?'swidth':''" />
									<div v-if="sessionStatus==1" class="qcode-tips">手机已扫描,等待确认</div>
								</template>
							</div>
						</div>
					</view>
					<view class="row4-text" v-show="isShowText" v-if="!isSM">
						下载畅运通货主端，注册并完成身份认证，认证通过后可使用注册的账号登录本网站
					</view>
					<view class="row4" @click="showText" v-show="!isShowText">
						{{isSM?'请使用畅运通货主端APP扫码登录':'获取账号'}}
					</view>
				</view>
			</view>
			<view class="content2-bgc">
				<view class="content2">
					<view class="title" @click="toZXPage" style="cursor: pointer;">
						<view class="">
							行业资讯
							<image src="../../static/jt2.png" mode="widthFix" class="img"></image>
						</view>
					</view>
					<view class="zx-content">
						<view class="left">
							<view class="row1">
								<image :src="zxList[0].cover" mode="widthFix" class="img"></image>
								<view class="date">
									<view class="day">
										{{zxList[0].date2}}
									</view>
									<view class="year">
										{{zxList[0].date1}}
									</view>
								</view>
							</view>
							<view class="title row2">
								{{zxList[0].title}}
							</view>
							<view class="row3">
								{{zxList[0].content}}
							</view>
							<view class="row4">
								<view class="detaiil" style="cursor: pointer;" @click="toDetail(zxList[0].id,'zx')">
									了解详情 <image src="../../static/jt1.png" mode="widthFix" class="img"></image>
								</view>
								<view class="right-text">
									来源：{{zxList[0].issuingAgency}}
								</view>
							</view>
						</view>
						<view class="right">
							<!-- zxLixt -->
							<view class="row" v-for="item in zxRightList">
								<view class="left-view">
									<view class="date">
										<view class="day">
											{{item.date2}}
										</view>
										<view class="year">
											{{item.date1}}
										</view>
									</view>

								</view>
								<view class="right-view">
									<view class="row1">
										{{item.title}}
									</view>
									<view class="row2">
										{{item.content}}
									</view>
									<view class="row3">
										<view class="text-left">
											来源：{{item.issuingAgency}}
										</view>
										<view class="text-right" @click="toDetail(item.id,'zx')">
											了解详情<image src="../../static/jt1.png" mode="widthFix" class="img"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="content3-bgc">
				<view class="content3">
					<view class="left">
						<view class="title" @click="toPage(1)" style="cursor: pointer;">
							平台公告
							<image src="../../static/jt2.png" mode="widthFix" class="img"></image>
						</view>
						<!-- ggList -->
						<view class="gg-content">
							<view class="item" v-for="item in ggList" @click="toDetail(item.id,'公告')">
								<view class="left">
									<view class="point">

									</view>
									<view class="text">
										{{item.title}}
									</view>
								</view>
								<view class="date">
									{{item.issuingDate}}
								</view>
							</view>

						</view>
					</view>
					<view class="right">
						<view class="title" @click="toPage(2)" style="cursor: pointer;">
							处理公示
							<image src="../../static/jt2.png" mode="widthFix" class="img"></image>
						</view>
						<view class="gs-content">
							<view class="item" v-for="item in gsList" @click="toDetail(item.id,'公示')">
								<view class="point"></view>
								<view class="right-view">
									<view class="text">
										{{item.title}}
									</view>
									<view class="date">
										{{item.issuingDate}}
									</view>
								</view>

							</view>

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

<script>
	import {
		mapState
	} from 'vuex';
	import top from '@/components/top.vue'
	import bottom from '@/components/bottom.vue'
	export default {
		components: {
			top,
			bottom
		},
		data() {
			return {
				pageType: 'index',
				requestIp: 'http://localhost',
				base64Code: '',
				sessionId: '',
				sessionStatus: 0,
				username: '',
				isShowText: false,
				isSM: false,
				items1: ['行业资讯'],
				items: ['平台公告', '处理公示'],
				styles: [{
						value: 'button',
						text: '按钮',
						checked: true
					},
					{
						value: 'text',
						text: '文字'
					}
				],
				colors: ['#2F54EF', '#4cd964', '#dd524d'],
				current: 0,
				colorIndex: 0,
				activeColor: '#2F54EF',
				styleType: 'button',
				show: false,
				title: '获取账号',
				content: '下载畅运通货主端，注册并完成身份认证，认证通过后可使用注册的账号登录本网站',
				value: '',
				tips: '',
				// refCode: null,
				seconds: 10,
				count: 0,
				checkLogin: null,
				user: {},
				isHaveUser: false,
				verifyCode: null,
				phone: '',
				zxList: [{
					cover: ''
				}],
				zxRightList: [],
				ggList: [],
				gsList: []
			}
		},
		onLoad() {
			this.user = uni.getStorageSync('userInfo');
			if (this.user) {
				this.isHaveUser = true
				this.$store.commit('login', this.user)
			} else {}
			this.getNews()
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		methods: {
			// 获取富文本的纯文字内容
			convertIdeogramToNormalCharacter(val) {
				const arrEntities = {
					'lt': '<',
					'gt': '>',
					'nbsp': ' ',
					'amp': '&',
					'quot': '"'
				};
				return val.replace(/&(lt|gt|nbsp|amp|quot);/ig, function(all, t) {
					return arrEntities[t];
				});
			},
			getPlainText(richCont) {
				const str = richCont;
				let value = richCont;
				if (richCont) {
					// 方法一： 
					value = value.replace(/\s*/g, ""); //去掉空格
					value = value.replace(/<[^>]+>/g, ""); //去掉所有的html标记
					value = value.replace(/↵/g, ""); //去掉所有的↵符号
					value = value.replace(/[\r\n]/g, "") //去掉回车换行
					value = value.replace(/&nbsp;/g, "") //去掉空格
					value = this.convertIdeogramToNormalCharacter(value);
					return value;
				} else {
					return null;
				}
			},
			getNews() {
				this.$request.baseRequest('get', '/hyPublicConsultation/selectHyPublicConsultationList').then(res => {
						if (res.code == 200) {
							console.log("res", res)
							// this.$store.commit('login', res.data)
							// this.isHaveUser = true
							this.zxList = res.data.publicConsultations1
							this.ggList = res.data.publicConsultations
							this.gsList = res.data.publicConsultations2

							for (let i = 0; i < this.zxList.length; i++) {
								this.zxList[i].date1 = this.zxList[i].issuingDate.substring(0, this.zxList[i]
									.issuingDate
									.lastIndexOf('-'))
								this.zxList[i].date2 = this.zxList[i].issuingDate.substring(this.zxList[i].issuingDate
									.lastIndexOf('-') + 1, this.zxList[i].issuingDate.length)
								this.zxList[i].content = this.getPlainText(this.zxList[i].releaseContent)
							}
							console.log('this.zxListt', this.zxList)
							this.zxRightList = this.zxList.splice(1)
							console.log('this.zxRightList', this.zxRightList)
							uni.hideLoading()

						} else {
							uni.hideLoading()
							uni.showToast({
								title: res.message,
								icon: 'none',
								duration: 2000
							})
						}
					})
					.catch(res => {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						})
					});
			},
			submit() {
				this.$request.baseRequest('get', '/commonUser/loginVerifyCode', {
						phone: this.phone,
						verifyCode: this.verifyCode,
						loginFlag: 1,
						identification: 2
					}).then(res => {
						console.log("res", res)
						if (res.code == 200) {
							console.log("res", res)
							this.$store.commit('login', res.data)
							this.isHaveUser = true
							uni.hideLoading()

						} else {
							uni.hideLoading()
							uni.showToast({
								title: res.message,
								icon: 'none',
								duration: 2000
							})
						}
					})
					.catch(res => {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						})
					});
			},
			//加载
			loadQrCode() {
				this.$request.baseRequest('get', '/login/loginQrCode').then(res => {
						this.base64Code = res.data.src;
						this.sessionId = res.data.token;
						this.startQrCodeListener();
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			//开启sse长连接
			startQrCodeListener() {
				let that = this
				this.checkLogin = setInterval(() => {
					that.$request.baseRequest('get', '/login/getLoginStatus', {
							token: that.sessionId
						}).then(res => {
							that.count++;
							console.log(that.count)
							if (res.message == '扫描成功！') {
								this.sessionStatus = 1

							} else if (res.message == '未登录！') {
								this.sessionStatus = 0
							} else if (res.message == '二维码失效！') {
								this.sessionStatus = 2
							} else if (typeof(res.message) == 'object') {
								this.sessionStatus = 3
								clearInterval(this.checkLogin)
								this.isHaveUser = true
								that.username = res.message.userName
								that.$store.commit('login', res.message)
							}
						})
						.catch(res => {
							uni.$u.toast(res.message);
						});
				}, 5000)
				// let sseObj = null
				// //发送Http长连接
				// sseObj = new EventSource('http://192.168.110.82:8099' + "/login/getLoginStatus?token=" + this.sessionId);
				// //回调方法
				// sseObj.onmessage = (evt) => {
				// 	let resultJson = JSON.parse(evt.data);
				// 	//session状态
				// 	this.sessionStatus = resultJson.data.status;
				// 	//等于-1表示sessionId过期
				// 	if (this.sessionStatus == -1) {
				// 		sseObj.close();
				// 		return;
				// 	} else if (this.sessionStatus == 2) {
				// 		this.username = resultJson.data.username;
				// 		sseObj.close();
				// 	}
				// 	console.log(evt.data);
				// }

				// sseObj.error = (evt) => {
				// 	sseObj.close();
				// }
			},
			//重新刷新二维码
			resetRefresh() {
				// sseObj.close();
				clearInterval(this.checkLogin)
				this.loadQrCode();
			},
			toDetail(id, type) {
				let _src = ''
				if (type == 'zx') {
					_src = "/pages/index/zxDetail?id=" + id
				} else {
					_src = "/pages/index/infoDetail?id=" + id + '&type=' + type
				}
				uni.navigateTo({
					url: _src
				})
			},
			showText() {
				this.isShowText = true
			},
			toZXPage() {
				uni.navigateTo({
					url: "/pages/index/zx"
				})
			},
			toPage(type) {
				uni.navigateTo({
					url: "/pages/index/info?type=" + type
				})
			},

			smClick(type) {
				if (type == 1) {
					this.isSM = true
					this.loadQrCode()
				} else {
					clearInterval(this.checkLogin)
					this.isSM = false
				}

			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},

			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.phone.length == 11 && /^0?1[3|4|5|6|7|8][0-9]\d{8}$/.test(this.phone)) {} else if (this.phone
					.length == 0) {
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none'
					})
					return
				} else {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$request.baseRequest('get', '/commonUser/sendVerifyCode', {
							phone: this.phone
						}).then(res => {
							uni.hideLoading();
							uni.$u.toast('验证码已发送');
							this.$refs.uCode.start()
							console.log(res);
						})
						.catch(res => {
							uni.hideLoading();
							uni.showToast({
								title: res.errMsg,
								icon: 'none',
								duration: 2000
							})
						});

					// setTimeout(() => {
					// 	uni.hideLoading();
					// 	// 这里此提示会被this.start()方法中的提示覆盖
					// 	uni.$u.toast('验证码已发送');
					// 	// 通知验证码组件内部开始倒计时
					// 	this.$refs.uCode.start();
					// }, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				uni.$u.toast('倒计时结束');
			},
			start() {
				uni.$u.toast('倒计时开始');
			}
		}
	}
</script>

<style scoped lang="scss">
	body {
		overflow: auto;
	}

	.bgc-sm {
		background: url('@/static/bgc-sm.png') center no-repeat !important;
		background-size: cover !important;
	}

	.content1 {
		width: 100%;
		height: 840px;
		background: url('@/static/bgc1.png') center no-repeat;
		background-size: cover;
		position: relative;
		min-width: 1200px;

		.text-active {
			color: #2F54EF !important;
		}

		.bgc1 {
			width: 100vw;
		}

		.get-code {
			color: #2F54EF;
			position: absolute;
			right: 13px;
			top: 30%;
		}

		.bottom-view {
			margin: 28px;
		}

		.login {
			position: absolute;
			right: 20%;
			top: 26%;
			background: white;
			width: 388px;
			height: 450px;
			box-sizing: border-box;
			border-radius: 20px;

			.row1,
			.row2 {
				display: flex;
			}

			.row1 {
				border-radius: 10px 10px 0 0;
				position: relative;
				background: #F6F6F6;
				height: 86px;
				box-sizing: border-box;
				font-size: 22px;
				display: flex;
				align-items: center;
				padding-left: 20px;
			}

			.line {
				margin: 0 27px 0 20px;
				width: 1px;
				height: 34px;
				background: #BBBBBB;
			}

			.sm {
				margin-right: 20px;
				color: #999999;
				font-size: 18px;
			}

			.dx {
				color: #999999;
				font-size: 18px;
			}

		}

		.row2 {
			margin-top: 20rpx;
			position: relative;
		}

		.row3 {
			margin-top: 65px;

			.btn {
				height: 56px;
				background: #2828FF;
				border-radius: 6px;
			}
		}

		.row4-text {
			margin-top: 37px;
			padding: 0 28px;
			font-size: 14px;
		}

		.row4 {
			display: flex;
			justify-content: center;
			margin-top: 53px;
		}
	}

	.ewm-style {
		width: 167px;
		height: 167px;
		background: #FFFFFF;
		border-radius: 10px;
		border: 1px solid #979797;
		overflow: hidden;
		padding: 5px;
		margin: 40px auto;

		.img {
			width: 100%;
			height: 100%;
		}
	}

	.content2-bgc {
		background: #fff;
		padding: 100rpx 400rpx;
		min-width: 1200px;
		box-sizing: border-box;
	}

	.title {
		font-size: 56rpx;
		font-weight: 500;
		color: #0B0B0B;
		display: flex;
		align-items: center;

		.img {
			width: 48rpx;
			margin-left: 40rpx;
		}
	}

	.content2 {
		// width: 1600px;
		// min-width: 1200px;
		margin: auto;



		.zx-content {
			display: flex;
			justify-content: space-between;
			margin-top: 86rpx;

			.left,
			.right {
				width: 49%;
			}

			.left {
				.row1 {
					position: relative;

					.img {
						width: 100%;
						height: 880rpx !important;
					}

					.date {
						position: absolute;
						top: 0;
						left: 0;
						width: 214rpx;
						height: 214rpx;
						background: #2F54EF;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						color: white;

						.day {
							font-size: 92rpx;
							font-weight: bold;
							color: #FFFFFF;
						}

						.year {
							font-size: 36rpx;
							font-weight: 500;
							margin-top: 30rpx;
						}
					}
				}

				.row2 {
					font-size: 52rpx;
					font-weight: 500;
					color: #333333;
					position: relative;
					margin-top: 40rpx;
				}

				.row2::after {
					position: absolute;
					content: "";
					bottom: -20px;
					left: 0;
					width: 35px;
					height: 4px;
					background: #333333;
				}

				.row3 {
					margin-top: 60rpx;
					font-size: 32rpx;
					color: #7A8189;
				}

				.row4 {
					margin-top: 68rpx;
					display: flex;
					justify-content: space-between;


					.right-text {
						font-size: 36rpx;
						color: #90969B;
					}

					.detaiil {
						display: flex;
						align-items: center;
						font-size: 36rpx;
						color: #2F54EF;

						.img {
							width: 28rpx;
							margin-left: 20rpx;
						}
					}
				}
			}

			.right {
				.row {
					display: flex;
					border-bottom: 1px solid #F5F5F5;
					padding-bottom: 62rpx;
					margin-top: 62rpx;

					.left-view {
						width: 148rpx;
						height: 148rpx;
						background: #F5F6F9;
						border-radius: 4px;
						margin-right: 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 10rpx 20rpx;

						.date {
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;

							.day {
								font-size: 68rpx;
								font-weight: bold;
								color: #ADB1B5;
							}

							.year {
								margin-top: 20rpx;
								font-size: 24rpx;
								font-weight: 500;
								color: #ADB1B5;
							}
						}
					}

					.right-view {
						.row1 {

							color: #333333;

							font-size: 36rpx
						}

						.row2 {

							font-size: 32rpx;
							color: #969CA1;

							line-height: 64rpx;
							margin-top: 20rpx;
						}

						.row3 {
							display: flex;
							justify-content: space-between;
							margin-top: 64rpx;

							.text-left {
								font-size: 36rpx;
								color: #90969B;
							}

							.text-right {
								display: flex;
								align-items: center;
								font-size: 36rpx;
								font-weight: 500;
								color: #2F54EF;

								.img {
									width: 28rpx;
									margin-left: 20rpx;
								}
							}
						}
					}
				}

				.row:nth-of-type(1) {
					margin-top: 0;
				}

				.row:last-of-type {
					border-bottom: 0;
				}
			}
		}
	}

	.content3-bgc {
		background-color: #FAFAFB;
		padding: 198rpx 400rpx;

		.content3 {
			display: flex;

			.point {
				width: 6px;
				height: 6px;
				background: #D8D8D8;
				margin-right: 40rpx;
			}

			.left {
				.gg-content {
					margin-top: 56rpx;
					width: 2010rpx;
					height: 1404rpx;
					background: #FFFFFF;
					box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.06);
					border-radius: 4px;
					padding: 30rpx 72rpx 88rpx 72rpx;
					box-sizing: border-box;

					.item {
						display: flex;
						justify-content: space-between;
						border-bottom: 1px solid #F5F5F5;
						line-height: 160rpx;

						.left {
							display: flex;
							align-items: center;
						}

						.text {
							font-size: 18px;
							color: #333333;
						}
					}

					.item:last-of-type {
						border-bottom: 0;
					}
				}
			}

			.right {
				padding-left: 96rpx;

				.gs-content {
					margin-top: 56rpx;
					width: 984rpx;
					height: 1404rpx;
					background: #FFFFFF;
					box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.06);
					border-radius: 4px;

					.item {
						display: flex;
						align-items: center;
						padding: 0 46rpx;
						font-size: 36rpx;
						font-weight: 500;
						border-bottom: 1px solid #F5F5F5;
						line-height: 60rpx;
						padding: 20px 0;
						margin: 0 20px;

						.text {
							color: #333333;
						}

						.date {

							color: #90969B;
							line-height: 25px;
							margin-top: 20rpx;
						}
					}

					.item:last-of-type {
						border-bottom: 0;
					}
				}
			}

		}
	}

	.erm-img {
		width: 100%;
	}

	.swidth {
		width: 80% !important;
	}

	.qcode-img {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: white;
	}

	.qcode-tips {
		margin-top: 10px;
	}
</style>