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

<template>
	<view>
		<public-module></public-module>
		<service-widget @btnClick="btn_click"></service-widget>
		<view class="header dis a-c j-s" :style="transitionStyle">
			<view class="city dis a-c " :style="{opacity:featureHideHandling?1:0}">
				<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>

			<view class="search" :style="{opacity:featureHideHandling?1:0}">
				<u-search :show-action="true" action-text="搜索" bg-color="#fff" maxlength="10" placeholder="请输入关键词"
					:clearabled="false" :action-style="{position: 'absolute',right:'10px'}" search-icon="0">
				</u-search>
				<image class="search-Scan" src="../../static/image/index/img/Scan.png" mode="" @click="scan">
				</image>
			</view>
		</view>
		<!-- 占位块 -->
		<view class="place"></view>
		<view class="swiperelement" :style="transitionStyle">
			<view class="swiper">
				<u-swiper :list="swiperlist" height="258" duration="400" interval="4000" mode="rect" border-radius="12"
					@change="swiperChange" @click="swiperClick"></u-swiper>
			</view>

		</view>
		<view class="pagebody">
			<index-nav :resdata="categoryList" :row="featureHideHandling?2:1" @authModal="authModal"></index-nav>
			<template v-if="featureHideHandling">
				<u-tabs :list="itemCategorylist" :is-scroll="false" :current="current" @change="change"
					style="background: transparent;" active-color="#000"></u-tabs>
				<view class="mt-1 dis j-s a-c">
					<view class="activity dis f-c " @click="activity('/pages/index/checkIn')">
						<text>签到有礼</text>
						<text>福利多多</text>
						<image src="../../static/image/index/pick-img/1.png" mode="" style="width: 32px;height: 32px;">
						</image>
					</view>
					<view class="activity dis f-c " @click="activity('/pages/index/task')">
						<text>精彩任务</text>
						<text>奖励多多</text>
						<image src="../../static/image/index/pick-img/2.png" mode="" style="width: 36px;height: 32px;">
						</image>
					</view>
					<view class="activity dis f-c " @click="activity('/pages/index/flashSale')">
						<text>限时秒杀</text>
						<text>9.9元起</text>
						<image src="../../static/image/index/pick-img/3.png" mode="" style="width: 32px;height: 32px;">
						</image>
					</view>
				</view>
				<view class="mt-3 dis j-s ">
					<view class="flashSale dis f-c">
						<image class="bg1" src="../../static/image/index/pick-img/bg1.png" mode=""></image>
						<view class="title dis j-s">
							<image src="../../static/image/index/pick-img/4.png" mode="widthFix"
								style="width: 73px;height: 25px;"></image>
							<view class="dis a-c">
								<image src="../../static/image/index/pick-img/loding.png" mode=""
									style="width: 12px;height: 12px;"></image>
								<text>换一批</text>
							</view>
						</view>
						<view class="dis j-s a-c mt-2">
							<image src="../../static/image/index/pick-img/5.png" mode=""
								style="width: 56px;height: 56px;">
							</image>
							<image src="../../static/image/index/pick-img/8.png" mode=""
								style="width: 80px;height: 56px;">
							</image>
						</view>
						<view class="dis j-s a-c mt-2">
							<image src="../../static/image/index/pick-img/6.png" mode=""
								style="width: 56px;height: 56px;">
							</image>
							<image src="../../static/image/index/pick-img/9.png" mode=""
								style="width: 80px;height: 56px;">
							</image>
						</view>
						<view class="dis j-s a-c mt-2">
							<image src="../../static/image/index/pick-img/7.png" mode=""
								style="width: 56px;height: 56px;">
							</image>
							<image src="../../static/image/index/pick-img/8.png" mode=""
								style="width: 80px;height: 56px;">
							</image>
						</view>
					</view>
					<view class="hotSaleList dis f-c">
						<image class="bg1" src="../../static/image/index/pick-img/bg2.png" mode=""></image>
						<view class="title dis j-s">
							<text style="font-size: 17px;color: #333;font-weight: bold;">热销榜</text>
							<view class="dis a-c">
								<image src="../../static/image/index/pick-img/loding.png" mode=""
									style="width: 12px;height: 12px;"></image>
								<text>换一批</text>
							</view>
						</view>
						<view class="mt-2 dis a-c j-s content" style="position: relative;">
							<image src="../../static/image/index/pick-img/10.png" mode=""
								style="width: 53px;height: 53px;margin-right: 8px;">
							</image>
							<view class="dis f-c " style="width: 55%;">
								<text style="font-size: 12px;color: #333;line-height: 1.2;">车仆后视镜弹水剂 新升级...</text>
								<text style="color: #FF476C;font-size: 12px;">￥ <text
										style="font-size: 15px;font-weight: bold;line-height: 1.2;">79</text> </text>
							</view>
						</view>
						<view class="mt-2 dis a-c j-s " style="position: relative;">
							<image src="../../static/image/index/pick-img/11.png" mode=""
								style="width: 53px;height: 53px;margin-right: 8px;">
							</image>
							<view class="dis f-c " style="width: 55%;">
								<text style="font-size: 12px;color: #333;line-height: 1.2;">朗龙汽车香水车载香薰摆...</text>
								<text style="color: #FF476C;font-size: 12px;">￥ <text
										style="font-size: 15px;font-weight: bold; line-height: 1.2;">65.9</text> </text>
							</view>
						</view>
						<view class=" dis a-c j-s mt-2" style="position: relative;">
							<image src="../../static/image/index/pick-img/12.png" mode=""
								style="width: 53px;height: 53px;margin-right: 8px;">
							</image>
							<view class="dis f-c  a-start " style="width: 55%;">
								<text style="font-size: 12px;color: #333;line-height: 1.2;">新车除甲醛除异味车内除...</text>
								<text style="color: #FF476C;font-size: 12px;">￥ <text
										style="font-size: 15px;font-weight: bold;line-height: 1.2;">29.5</text> </text>
							</view>
						</view>
					</view>
				</view>
			</template>
		</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 {
				itemCategorylist: [{
						name: '推荐'
					}, {
						name: '美食'
					}, {
						name: '玩乐',
					}, {
						name: '出游',
					}, {
						name: '亲子',
					},
					{
						name: '运动',
					}
				],
				current: 0,
				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,
				banben: {},
				bgColor: "#4B75EB",
				//轮播
				categoryList: [{
						cat_id: 0,
						img: '/static/image/index/category-img/1.png',
						title: '车险',
						src: '/pages/carInsure/entry',
						width: '92rpx',
						height: '69rpx',
					},
					{
						cat_id: 1,
						img: '/static/image/index/category-img/2.png',
						title: '车损测算',
						width: '92rpx',
						height: '69rpx',
						// src: '/pages/carInsure2/entry'
					},
					{
						cat_id: 2,
						img: '/static/image/index/category-img/3.png',
						title: '道路救援',
						// src: '/pages/roadRescue/index',
						width: '92rpx',
						height: '69rpx',
					},
					{
						cat_id: 3,
						img: '/static/image/index/category-img/4.png',
						title: '司法鉴定',
						width: '92rpx',
						height: '69rpx',
						src: '',

					},
					{
						cat_id: 4,
						img: '/static/image/index/category-img/5.png',
						title: '掌柜商城',
						width: '92rpx',
						height: '69rpx',
						// src: '/pages/shoppingMall/index'
					},
					{
						cat_id: 5,
						img: '/static/image/index/category-img/6.png',
						title: '洗车',
						width: '68rpx',
						height: '68rpx',
						// src: '/pages/carWash/carWash'
					},
					{
						cat_id: 6,
						img: '/static/image/index/category-img/7.png',
						title: '车检代办',
						width: '68rpx',
						height: '68rpx',
						// src: '/pages/caragent/index'
					},
					{
						cat_id: 7,
						img: '/static/image/index/category-img/8.png',
						title: '审车',
						width: '68rpx',
						height: '68rpx',
						src: ''
					},
					{
						cat_id: 8,
						img: '/static/image/index/category-img/9.png',
						title: '代驾',
						width: '68rpx',
						height: '68rpx',
						src: ''
					},
					{
						cat_id: 9,
						img: '/static/image/index/category-img/10.png',
						title: '一键挪车',
						width: '68rpx',
						height: '68rpx',
						// 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: "平安行.境内节假日出行意..."
					},
				],
				swiperlist: [{
						image: '/static/image/index/ad-img/ad1.png',
						backgroundColor: '#3385F5'
					},
					// {
					// 	image: '/static/image/index/ad-img/ad2.png',
					// 	backgroundColor: '#F5B333'
					// },
					// {
					// 	image: '/static/image/index/ad-img/ad3.png',
					// 	backgroundColor: '#FF6591'
					// }
				],
				headerPosition: "fixed",
				getApplicationStatus: "",
				socketOpen: false,
				latitude: "",
				longitude: "",
				province: "",
				city: "",
				district: "",
				street: "",
				streetNum: "",
				poiName: "",
				cityCode: "",
				messageInterval: null,
				transitionStyle: {
					backgroundColor: '#3385F5',
				}
			};
		},
		async onLoad() {},
		computed: {
			...mapState(['userInfo', 'featureHideHandling'])
		},
		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');
			}
			this.initializeCategoryList();
			// #ifdef APP-PLUS
			// this.getCurrentLocation();
			// this.soketInit();
			// #endif

		},

		async onPullDownRefresh() {
			await this.loginUser();
			uni.stopPullDownRefresh();
		},
		methods: {
			initializeCategoryList() {
				this.categoryList.map(val => {
					if (!val.src) {
						val["featureHideHandling"] = this.featureHideHandling;
					} else {
						val["featureHideHandling"] = true;
					}
					return val;
				})
			},
			activity(url) {
				uni.navigateTo({
					url: url,
				})
			},
			change(index) {
				this.current = index;
			},
			swiperChange(index) {
				let color = this.swiperlist.find((val, ele) => ele == index);
				this.transitionStyle.backgroundColor = color.backgroundColor;

			},
			swiperClick() {
				uni.navigateTo({
					url: '/pages/carInsure/entry'
				})
			},
			async loginUser() {
				let userInfoRes = await this.$http.get('/user/loginUser')
				store.commit('setUserModules', {
					title: 'userInfo',
					data: {
						sysUser: {
							...userInfoRes.data
						}
					}
				})
			},
			authModal(res) {
				this.authShow = res;
			},

			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;
							})

					}
				});
			},

			//扫一扫
			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>
	@import '@/style/mixin.scss';

	/deep/ {
		.u-tab-bar {
			background: linear-gradient(90deg, rgba(245, 128, 71, 0.8) 20%, rgba(242, 49, 78, 1) 100%) !important;
			border-radius: 4px 4px 4px 4px;
		}

		.u-content {
			padding-left: 40px;
		}

		.u-indicator-item-rect-active {
			background-color: #fff;
		}

		.u-indicator-item-rect {
			border-radius: 2px;
			height: 3px;
		}
	}


	page {
		background-color: #EEF1F7;
	}

	.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;
		transition: background-color 0.5s;

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

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

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

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

		.search {
			position: relative;
			width: 70%;


			.search-Scan {
				width: 20px;
				height: 20px;
				position: absolute;
				left: 10px;
				top: 0;
				bottom: 0;
				margin: auto;
				padding-right: 5px;

				::after {
					content: "";
					width: 0px;
					height: 13px;
					border: 1px solid #DDDDDD;
					position: absolute;
					right: 0;
					top: 0;
					bottom: 0;
					margin: auto;
				}
			}


		}
	}

	.swiperelement {
		height: 70px;
		border-radius: 0px 0px 20px 0px;
		padding: 10px 12px 0;
		position: relative;
		transition: background-color 0.5s;
		/* 渐变效果 */

		::after {
			content: "";
			display: table;
			clear: both;
		}

		.swiper {
			height: 258rpx;
			box-shadow: 0px 2px 5px 0px rgba(95, 107, 132, 0.2);
			position: absolute;
			left: 12px;
			right: 12px;
			top: 10px;
			border-radius: 6px;
			border-bottom: 1px solid #E2E6EC;
		}
	}

	.pagebody {
		padding: 83px 12px 12px;
		height: calc(100vh - 180px);
		background-color: #F8F8FA;

		.activity {
			width: 31.5%;
			background: #FFFFFF;
			box-shadow: 0px 1px 3px 0px rgba(95, 107, 132, 0.05);
			padding: 8px;
			border-radius: 6px;
			position: relative;

			text:nth-child(1) {
				font-size: 14px;
				color: #333333;
				font-weight: bold;
			}

			text:nth-child(2) {
				font-size: 12px;
				color: #999;
			}

			image {
				position: absolute;
				right: 0;
				bottom: 0;
			}
		}

		.flashSale {
			width: 48.5%;
			background: #FFFFFF;
			box-shadow: 0px 2px 5px 0px rgba(95, 107, 132, 0.05);
			border-radius: 6px;
			position: relative;
			padding: 8px;

			.bg1 {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 67px;
			}

			.title {
				position: relative;

				text {
					font-size: 22rpx;
					color: #999;
					margin-left: 3px;
				}
			}

		}

		.hotSaleList {
			width: 48.5%;
			background: #FFFFFF;
			box-shadow: 0px 2px 5px 0px rgba(95, 107, 132, 0.05);
			border-radius: 6px;
			position: relative;
			padding: 8px;

			.bg1 {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 67px;
			}

			.title {
				position: relative;

				text {
					font-size: 22rpx;
					color: #999;
					margin-left: 3px;
				}
			}



		}

	}

	/* 占位 */
	.place {
		height: 108px;
	}




	.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>