vue-insagent-app/pages/index/index.vue

<template>
	<view style="background: #F8FAFE;">
		<public-module></public-module>
		<service-widget @btnClick="btn_click"></service-widget>
		<view class="header dis a-c j-s">
			<view class="city dis a-c ">
				<image src="../../static/image/index/img/cityicon.png" mode=""></image>
				<text>{{city}}</text>
				<image src="../../static/image/index/img/jiantou.png" mode="" style="width: 12px;height: 12px;"></image>
			</view>
			<image src="../../static/image/index/img/Scan.png" mode="" @click="scan"></image>
		</view>
		<view class="page">
			<!-- 认证提示 -->
			<view class="dis a-c j-s">
				<view class="frequentClasses dis f-c " :style="{backgroundImage:`url(${item.img})`}"
					v-for="(item,index) in frequentClassesList" :key="index" @click="tapEvent(item)">
					<text>{{item.title}}</text>
					<text>{{item.description}}</text>
				</view>
			</view>
			<index-nav :resdata="categoryList" :row="1" style="margin: 14px 0;"></index-nav>
			<view class="banner">
				<image mode="widthFix" src="/static/image/index/ad-img/ad.png" @click="back"></image>
			</view>
			<view class="topProducts dis  f-c ">
				<text class="title mt-2 mb-2">精选产品</text>
				<view class="data dis f-c">
					<view class="Product dis a-c " v-for="(item,index) in pickList" :key="index">
						<image :src="item.img" mode=""></image>
						<view class="dis f-c a-start item">
							<text
								style="color: #232832;font-size: 16px;font-weight: bold;letter-spacing: 1px;">{{item.title}}</text>
							<text style="color: rgba(35, 40, 50, 0.6);font-size: 12px;">{{item.sum}}人购买</text>
							<view class="dis a-c">
								<view class="slogan" :style="{backgroundColor:itemslogan.back,color:itemslogan.color}"
									v-for="(itemslogan,indexslogan) in item.slogan" :key="indexslogan">
									<text>{{itemslogan.name}}</text>
								</view>
							</view>
							<text style="color: rgba(35, 40, 50, 0.6);font-size: 12px;"><text
									style="color: #FF6C29;font-size: 16px;margin-right: 3px;">{{item.price}}</text>/年起</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<auth-Modal :authShow="authShow" @btnClick="authShow=false" @maskClick="authShow=false"></auth-Modal>
	</view>
</template>
<script>
	import authModal from '@/components/modules/user/authModal.vue'; //实名认证弹窗
	import swiperImage from "@/components/modules/index/swiper-image.vue"
	import indexNav from "@/components/modules/index/index-nav.vue"
	import bankBin from "@/common/bankcardinfo.js"
	import store from '@/store';
	import {
		pathToBase64,
		base64ToPath
	} from '@/common/image-tools-base64.js';
	import {
		mapState
	} from "vuex"
	import base from '@/config/baseUrl';
	export default {
		components: {
			swiperImage,
			indexNav,
			authModal,
		},
		data() {
			return {
				authShow: false,
				locationshow: false,
				avatar: "",
				xuelishow: false,
				border: false,
				form: {
					name: "", //姓名
					identity: "", //身份证号
					birthday: "", //出生日期
					addressnow: "", //居住地址
					education: "", //学历
					bankname: "", //开户行
					accountno: "", //银行卡号
				},
				labelPosition: 'left',
				errorType: ['message'],
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: 'blur',
					}, ]
				},
				contentSlot: true,
				showTitle: false,
				asyncClose: false,
				isShow: false,
				current: 0,
				banben: {},
				bgColor: "#4B75EB",
				//轮播
				//分类
				frequentClassesList: [{
						cat_id: 0,
						img: '../../static/image/index/category-img/1.png',
						title: '车险',
						description: "快速比价",
						src: '/pages/carInsure/entry'
					},
					{
						cat_id: 1,
						img: '/static/image/index/category-img/2.png',
						title: '道路救援',
						description: "紧急预警",
						src: '/pages/roadRescue/index'
					},
					{
						cat_id: 2,
						img: '/static/image/index/category-img/3.png',
						title: '审车',
						description: "用车无烦恼",
						src: ''
					},
					{
						cat_id: 3,
						img: '/static/image/index/category-img/4.png',
						title: '车检代办',
						description: "便捷处理",
						src: '/pages/caragent/index'
					},
				],
				categoryList: [{
						cat_id: 0,
						img: '/static/image/index/category-img/5.png',
						title: '车损测算',
						// src: '/pages/carInsure2/entry'
					},
					{
						cat_id: 1,
						img: '/static/image/index/category-img/6.png',
						title: '司法鉴定',
						src: ''
					},
					{
						cat_id: 2,
						img: '/static/image/index/category-img/7.png',
						title: '掌柜商城',
						src: ''
					},
					{
						cat_id: 3,
						img: '/static/image/index/category-img/8.png',
						title: '洗车',
						src: ''
					},

					{
						cat_id: 4,
						img: '/static/image/index/category-img/9.png',
						title: '代驾',
						src: ''
					},

					{
						cat_id: 5,
						img: '/static/image/index/category-img/10.png',
						title: '一键挪车',
						src: '/pages/ticket/ticket'
					}
				],

				//推荐商品 3个
				pickList: [{
						goods_id: 0,
						img: '../../static/image/index/pick-img/1.png',
						price: '25.8元',
						slogan: [{
								name: "明星产品",
								back: "rgba(255,153,0,0.1)",
								color: "#FF9900"
							},
							{
								name: "刚需保障",
								back: "rgba(255,46,0,0.1)",
								color: "#FF2E00"
							},
							{
								name: "专家推荐",
								back: "rgba(0,82,255,0.1)",
								color: "#0052FF"
							}
						],
						sum: "1235",
						title: "平安个人意外险"
					},
					{
						goods_id: 1,
						img: '../../static/image/index/pick-img/2.png',
						price: '88元',
						sum: "588",
						slogan: [{
							name: "专家推荐",
							back: "rgba(0,82,255,0.1)",
							color: "#0052FF"
						}],
						title: "儿童综合医疗保险"
					},
					{
						goods_id: 0,
						img: '../../static/image/index/pick-img/1.png',
						price: '25.8元',
						slogan: [{
								name: "明星产品",
								back: "rgba(255,153,0,0.1)",
								color: "#FF9900"
							},
							{
								name: "刚需保障",
								back: "rgba(255,46,0,0.1)",
								color: "#FF2E00"
							},
							{
								name: "专家推荐",
								back: "rgba(0,82,255,0.1)",
								color: "#0052FF"
							}
						],
						sum: "1235",
						title: "平安行.国内自助游旅行意..."
					},
					{
						goods_id: 1,
						img: '../../static/image/index/pick-img/2.png',
						price: '88元',
						sum: "588",
						slogan: [{
							name: "专家推荐",
							back: "rgba(0,82,255,0.1)",
							color: "#0052FF"
						}],
						title: "平安行.境内节假日出行意..."
					},
				],

				headerPosition: "fixed",
				getApplicationStatus: "",
				socketOpen: false,
				latitude: "",
				longitude: "",
				province: "",
				city: "",
				district: "",
				street: "",
				streetNum: "",
				poiName: "",
				cityCode: "",
				messageInterval: null,
			};
		},


		computed: {
			...mapState(['userInfo'])
		},

		onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			if (e.scrollTop >= 0) {
				this.headerPosition = "fixed";
			} else {
				this.headerPosition = "absolute";
			}
		},
		onShow() {
			this.loginUser();
			if (this.userInfo.sysUser.headSculpture) {
				this.avatar = this.$base.baseUrl + this.userInfo.sysUser.headSculpture;
			} else {
				this.avatar = "/static/image/my/avatar1.png"
			}
			const arr = uni.getStorageSync('historyInfo');
			if (arr) {
				uni.removeStorageSync('historyInfo');
			}
			// #ifdef APP-PLUS
			this.getCurrentLocation();
			this.soketInit();
			// #endif

		},
		async onLoad() {



		},
		async onPullDownRefresh() {
			await this.loginUser();
			uni.stopPullDownRefresh();



		},
		methods: {
			async loginUser() {
				let userInfoRes = await this.$http.get('/user/loginUser')
				store.commit('setUserModules', {
					title: 'userInfo',
					data: {
						sysUser: {
							...userInfoRes.data
						}
					}
				})
			},
			tapEvent(item) {
				if (this.userInfo.sysUser.status == '0' && this.userInfo.sysUser.managementSource == '2') {
					if (this.userInfo.sysUser.factorVerify == '2') {
						uni.navigateTo({
							url: "/pages/user/authInfo"
						})
					} else {
						this.authShow = true;
					}
				} else if (this.userInfo.sysUser.status == '8' || this.userInfo.sysUser.status == '3') {
					uni.navigateTo({
						url: "/pages/user/practitionerInfo"
					})
				} else if (this.userInfo.sysUser.status == '2') {
					uni.navigateTo({
						url: "/pages/user/authResult1"
					})
				} else if (this.userInfo.sysUser.status == '1') {
					if (!item.src || item.src == '#' || item.src == '') {
						uni.showToast({
							icon: "none",
							title: '正在开发中...',
							duration: 1500
						})
					} else {
						this.navigate({
							url: item.src
						}, "navigateTo", true)
					}
				}
			},
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
			//初始化websoket连接
			soketInit() {
				uni.connectSocket({
					url: base.socketUrl + '/' + this.userInfo.sysUser.id,
					method: 'GET',

				});
				uni.onSocketOpen((res) => {
					console.log(res, '已打开');
					this.socketOpen = true;
					this.sendMessage();
				});
			},
			//发送信息
			sendMessage() {
				if (this.longitude) {
					const dataToSend = {
						userId: this.userInfo.sysUser.id,
						longitude: this.longitude,
						latitude: this.latitude,
						province: this.province,
						city: this.city,
						district: this.district,
						street: this.street,
						streetNum: this.streetNum,
						poiName: this.poiName,
						cityCode: this.cityCode
					};
					console.log("首次消息", dataToSend);
					if (this.socketOpen) {
						uni.sendSocketMessage({
							data: JSON.stringify(dataToSend)
						})
						if (this.messageInterval) {
							clearInterval(this.messageInterval);
						}
						this.messageInterval = setInterval(async () => {
							await this.getCurrentLocation();
							await this.updatesendMessage();
						}, 120000); // 120000毫秒 = 2分钟	
					}
				}
			},

			getCurrentLocation() {
				//获取当前的地理位置
				let vthis = this;
				uni.getStorage({
					key: 'location',
					success: function(res) {
						vthis.latitude = res.data.latitude;
						vthis.longitude = res.data.longitude;
						vthis.province = res.data.province;
						vthis.city = res.data.city;
						vthis.district = res.data.district;
						vthis.street = res.data.street;
						vthis.streetNum = res.data.streetNum;
						vthis.poiName = res.data.poiName;
						vthis.cityCode = res.data.cityCode;
					}
				});
			},
			updatesendMessage() {
				const dataToSend = {
					userId: this.userInfo.sysUser.id,
					longitude: this.longitude,
					latitude: this.latitude,
					province: this.province,
					city: this.city,
					district: this.district,
					street: this.street,
					streetNum: this.streetNum,
					poiName: this.poiName,
					cityCode: this.cityCode
				};
				console.log("持续消息", dataToSend);
				if (this.socketOpen) {
					uni.sendSocketMessage({
						data: JSON.stringify(dataToSend)
					})
				}
			},
			back() {
				uni.navigateTo({
					url: '/pages/carInsure/entry',
				})
			},
			nameClick() {
				this.navigate({
					url: "/pages/realname/realname"
				}, "navigateTo", true)
			},
			async chooseImage() {
				var _this = this;
				uni.chooseImage({
					count: 1,
					sizeType: "compressed",
					success(res) {
						pathToBase64(res.tempFilePaths[0])
							.then(async base64 => {
								var paramImg = {
									"image": base64, //图片base64
									"imgType": "1" //1身份证 2行驶证
								}
								let res2 = await _this.$http.post('/api/huanong/imgAI', paramImg);
								var data = res2.data.customerInfo;
								data.identifyValidDate = data.identifyValidDate.substr(0, 4) + '-' +
									data.identifyValidDate.substr(4, 2) + "-" + data.identifyValidDate
									.substr(6, 2)
								_this.form.name = data.name;
								_this.form.identifyNumber = data.identifyNumber;
								_this.form.identifyValidDate = data.identifyValidDate;
							})

					}
				});
			},
			// 验证银行卡
			async validateBankCard() {
				var that = this;
				that.bankname = "";
				await bankBin.getBankBin(this.form.name4)
					.then((data) => {
						that.form.name5 = data.bankName;
						return true;
					})
					.catch((err) => {
						return uni.showToast({
							title: err.split(":")[1],
							icon: "none"
						});
					})
			},

			//点击通知
			async click(index) {
				let res1 = await this.$http.get('/apps/getApplicationStatus?jobNumber=' + this.userInfo.sysUser.id);
				if (res1.code == 200) {
					this.getApplicationStatus = res1.data;
					if (this.getApplicationStatus == '0') {
						uni.showToast({
							icon: "none",
							title: '实名认证等待审核中',
							duration: 1500
						})
					} else if (this.getApplicationStatus == '3') {
						uni.showToast({
							icon: "none",
							title: '实名认证不通过，请修改后提交',
							duration: 1500
						})
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/user/certification'
							})
						}, 1000)
					}
				} else if (res1.code != '200') {
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/user/infoInput'
						})
					}, 1000)
				}
				if (res1.code == 200) {
					this.getApplicationStatus = res1.data;
				}

			},
			//扫一扫
			scan() {
				uni.scanCode({
					success: async (res) => {
						let uuid = this.getParameterByName("uuid", res.result)
						let resCode = await this.$http.get('/scanQrCode?uuid=' + uuid);
					}
				});
			},
			//搜索跳转
			toSearch() {
				// uni.showToast({title: "建议跳转到新页面做搜索功能"});
			},
			//推荐商品跳转
			toPick(e) {
				// uni.showToast({title: '推荐商品'+e.goods_id});
			},
			//商品跳转
			toGoods(e) {
				// uni.showToast({title: '商品'+e.goods_id});
			},
			getParameterByName(name, url) {
				if (!url) url = window.location.href;
				name = name.replace(/[\[\]]/g, '\\$&');
				var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
					results = regex.exec(url);
				if (!results) return null;
				if (!results[2]) return '';
				return decodeURIComponent(results[2].replace(/\+/g, ' '));
			}

		}
	};
</script>
<style lang="scss" scoped>
	page {
		background: #F8FAFE;
	}



	.status {
		width: 100%;
		height: 0;
		/*  #ifdef  APP-PLUS  */
		height: var(--status-bar-height);
		/*  #endif  */
		position: fixed;
		top: 0;
		z-index: 999;
	}

	.header {
		width: 100%;
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		z-index: 996;
		padding: 60px 16px 16px;
		background-color: #fff;

		.city {
			color: #fff;
			font-size: 15px;

			image {
				width: 22px;
				height: 22px;
			}

			text {
				color: #333;
				font-size: 13px;
				margin: 0 5px;
			}

			.icon {
				font-size: 10px;
				margin-left: 5px;
			}
		}

		image {
			width: 22px;
			height: 22px;
		}
	}

	.page {
		padding: 115px 16px 16px 16px;

		.frequentClasses {
			width: 148rpx;
			height: 148rpx;
			padding: 5px;
			background-size: cover;

			text:nth-child(1) {
				color: #fff;
				font-size: 28rpx;
				line-height: 1;
			}

			text:nth-child(2) {
				color: #fff;
				font-size: 22rpx;
			}
		}

		.topProducts {
			.title {
				color: #232832;
				font-size: 32rpx;
				font-weight: bold;
			}

			.data {
				background: #FFFFFF;
				box-shadow: 0px 2px 5px 0px #DAE3F4;
				border-radius: 6px;
				padding: 16px;
			}

			.Product {
				margin-bottom: 14px;

				image {
					width: 85px;
					height: 85px;
					margin-right: 14px;
				}

				.item {
					line-height: 1.5;

					.slogan {
						padding: 1px 3px;
						border-radius: 2px;
						font-size: 22rpx;
						margin-right: 5px;
					}
				}



			}
		}
	}

	/* 占位 */
	.place {
		/*  #ifdef  APP-PLUS  */
		margin-top: var(--status-bar-height);
		/*  #endif  */
		height: 106upx;
	}

	.pick {
		padding: 0 2.5vw 2.5vw 2.5vw;
	}

	.pick .box {
		width: 100%;
		border-radius: 20upx;
		background-color: #ffffff;
	}

	.pick .box .title {
		display: flex;
		justify-content: flex-start;
		align-items: flex-end;
		height: 60upx;
		border-bottom: solid 1upx #eee;
		padding-bottom: 10upx;
	}

	.pick .box .title .big {
		font-size: 34upx;
		padding-left: 20upx;
		color: #46434f;
	}

	.pick .box .title .small {
		font-size: 24upx;
		padding-left: 20upx;
		color: #827f8b;
	}

	.pick .box .product-list {
		padding-top: 15upx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.pick .box .product-list>view {
		background-color: #f8f8f8;
		display: inline-block;
		width: calc(50% - 10upx);
		position: relative;
		box-sizing: border-box;
		margin: 5upx;
		float: left;
	}

	.pick .box .product-list>view:nth-child(1) {
		height: 390upx;
	}

	.pick .box .product-list>view:nth-child(2),
	.pick .box .product-list>view:nth-child(3) {
		height: 190upx;
	}

	.pick .box .product-list>view:nth-child(1) .price {
		color: #e65339;
		font-size: 26upx;
		position: absolute;
		bottom: 6upx;
		left: 8upx;
	}

	.pick .box .product-list>view:nth-child(1) .slogan {
		color: #807c87;
		font-size: 26upx;
		position: absolute;
		bottom: 6upx;
		right: 15upx;
	}

	.pick .box .product-list>view:nth-child(1) image {
		width: 100%;
		height: 350upx !important;
		padding: 15upx;
		box-sizing: border-box;
		margin-bottom: 40upx;
	}

	.pick .box .product-list>view:nth-child(2),
	.pick .box .product-list>view:nth-child(3) {
		padding: 10upx;
		box-sizing: border-box;
	}

	.pick .box .product-list>view:nth-child(2) image,
	.pick .box .product-list>view:nth-child(3) image {
		width: calc(50% - 5upx);
		height: 170upx !important;
	}

	.pick .box .product-list>view:nth-child(2) .price,
	.pick .box .product-list>view:nth-child(3) .price {
		position: absolute;
		top: 25%;
		left: 55%;
		color: #e65339;
		font-size: 30upx;
	}

	.pick .box .product-list>view:nth-child(2) .slogan,
	.pick .box .product-list>view:nth-child(3) .slogan {
		position: absolute;
		top: 60%;
		left: 55%;
		color: #807c87;
		font-size: 26upx;
	}

	.banner image {
		width: 100%;
	}

	.goods-list {
		background-color: #f4f4f4;
	}

	.goods-list .title {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60upx;
		color: #979797;
		font-size: 24upx;
	}

	.goods-list .loading-text {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60upx;
		color: #979797;
		font-size: 24upx;
	}

	.goods-list .product-list {
		padding: 0 2.5% 2.5vw 2.5%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.goods-list .product-list .product {
		width: 48.75%;
		border-radius: 20upx;
		background-color: #fff;
		margin: 0 0 15upx 0;
	}

	.goods-list .product-list .product image {
		width: 100%;
		border-radius: 20upx 20upx 0 0;
	}

	.goods-list .product-list .product .name {
		width: 92%;
		padding: 10upx 4%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		text-align: justify;
		overflow: hidden;
		font-size: 30upx;
	}

	.goods-list .product-list .product .info {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		width: 92%;
		padding: 10upx 4% 10upx 4%;
	}

	.goods-list .product-list .product .info .price {
		color: #e65339;
		font-size: 30upx;
		font-weight: 600;
	}

	.goods-list .product-list .product .info .slogan {
		color: #807c87;
		font-size: 24upx;
	}
</style>