partnerApp/pages/index/index.vue

<template>
	<view>
		<u-notice-bar :autoplay="autoplay" :playState="playState" :speed="speed" :mode="mode" @click="click"
			:show="show" :type="type" :list="list" :moreIcon="moreIcon" :volumeIcon="volumeIcon" :duration="duration"
			bgColor="" padding="8rpx 24rpx" :isCircular="isCircular"
			style="position: absolute;top: 12%;z-index: 9;width: 100%;"></u-notice-bar>
		<!-- 更新组件 force 是否强制更新   tabbar：页面是否有原生tabbar组件-->
		<app-update ref="app_update" :tabbar="false"></app-update>
		<!-- 状态栏 -->
		<view class="status" :style="{position:headerPosition,backgroundColor:bgColor}"></view>
		<!-- 漂浮头部 -->
		<view class="header" :style="{position:headerPosition,backgroundColor:bgColor}">
			<view class="scan">
				<view class="icon iconfont icon-scan" @tap="scan"></view>
			</view>
			<view class="input">
				<view class="icon iconfont icon-search"></view>
				<input disabled placeholder="车险" @tap="toSearch()" />
			</view>
			<view class="menu">
				<image mode="aspectFill" :src="avatar"></image>
			</view>
		</view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<!-- 占位 -->
		<view class="place" :style="{backgroundColor:'#fff'}"></view>

		<!-- 轮播图 -->
		<swiper-image :resdata="swiperList" @changeEvent="swiperChange"></swiper-image>

		<!-- 分类轮播 -->
		<view class="px-2">
			<view class="py-1" style="border-radius: 20upx;background-color: #ffffff;">
				<index-nav :resdata="categoryList" :row="2"></index-nav>
			</view>
		</view>
		<!-- 推荐商品 -->
		<view class="pick" :style="{'background':'#fff'}">
			<view class="box">
				<view class="title">
					<view class="big">推荐商品</view>
					<view class="small">好货推荐 低价精选</view>
				</view>
				<view class="product-list">
					<view v-for="product in pickList" :key="product.goods_id" @tap="toPick(product)">
						<image mode="widthFix" :src="product.img"></image>
						<view class="price">{{product.price}}起</view>
						<view class="slogan">{{product.slogan}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 广告横幅 -->
		<view class="banner">
			<image mode="widthFix" src="/static/image/index/ad-img/ad.jpg"></image>
		</view>
		<!-- 商品列表 -->
		<view class="goods-list">
			<view class="title">— 猜你喜欢 —</view>
			<view class="product-list">
				<view class="product" v-for="product in productList" :key="product.goods_id" @tap="toGoods(product)">
					<image mode="widthFix" :src="product.img"></image>
					<view class="name">{{product.name}}</view>
					<view class="info">
						<view class="price">￥{{product.price}} 起</view>
						<view class="slogan">{{product.slogan}}</view>
					</view>
				</view>
			</view>
			<view class="loading-text">{{loadingText}}</view>
		</view>
	</view>
</template>
<script>
	import swiperImage from "@/components/modules/index/swiper-image.vue"
	import indexNav from "@/components/modules/index/index-nav.vue"
	import appUpdate from "@/components/yzhua006-update/app-update.vue"; //app更新组件
	import bankBin from "@/common/bankcardinfo.js"
	import store from '@/store';
	import {
		pathToBase64,
		base64ToPath
	} from '@/common/image-tools-base64.js';
	import {
		mapState
	} from "vuex"
	export default {
		components: {
			swiperImage,
			indexNav,
			appUpdate
		},
		data() {
			return {
				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,
				show: false,
				autoplay: true,
				type: 'warning',
				list: ['欢迎登录晋掌柜，请点击此处文字进行实名验证，方可使用所有功能。'],
				mode: 'horizontal',
				playState: 'play',
				speed: 160,
				duration: 1000,
				moreIcon: true,
				volumeIcon: true,
				isCircular: true,
				current: 0,
				banben: {},
				bgColor: "#4B75EB",
				//轮播
				swiperList: [],
				//分类
				categoryList: [{
						cat_id: 0,
						img: '/static/image/index/category-img/0.png',
						title: '车险',
						src: '/pages/carInsure/entry'
					},
					{
						cat_id: 1,
						img: '/static/image/index/category-img/1.png',
						title: '车损测算',
						src: ''
					},
					{
						cat_id: 2,
						img: '/static/image/index/category-img/2.png',
						title: '道路救援',
						src: ''
					},
					{
						cat_id: 3,
						img: '/static/image/index/category-img/3.png',
						title: '司法鉴定',
						src: ''
					},
					{
						cat_id: 4,
						img: '/static/image/index/category-img/4.png',
						title: '掌柜商城',
						src: ''
					},
					{
						cat_id: 5,
						img: '/static/image/index/category-img/5.png',
						title: '洗车',
						src: ''
					},
					{
						cat_id: 6,
						img: '/static/image/index/category-img/6.png',
						title: '审车',
						src: ''
					},
					{
						cat_id: 7,
						img: '/static/image/index/category-img/7.png',
						title: '代驾',
						src: ''
					},
					{
						cat_id: 8,
						img: '/static/image/index/category-img/8.png',
						title: '车检代办',
						src: '/pages/caragent/index'
					},
					{
						cat_id: 9,
						img: '/static/image/index/category-img/9.png',
						title: '一键挪车',
						src: '/pages/ticket/ticket'
					}
				],


				//推荐商品 3个
				pickList: [{
						goods_id: 0,
						img: '/static/image/index/pick-img/p1.jpg',
						price: '￥5.85',
						slogan: '限时抢购'
					},
					{
						goods_id: 1,
						img: '/static/image/index/pick-img/p2.jpg',
						price: '￥270',
						slogan: '精选商品'
					},
					{
						goods_id: 2,
						img: '/static/image/index/pick-img/p3.jpg',
						price: '￥281',
						slogan: '今日疯抢'
					}
				],
				//猜你喜欢列表
				productList: [{
						goods_id: 0,
						img: '/static/image/index/img/p1.jpg',
						name: '平安个人意外伤害险',
						price: '25.8',
						slogan: '1235人购买'
					},
					{
						goods_id: 1,
						img: '/static/image/index/img/p2.jpg',
						name: '一年期意外险',
						price: '1.2',
						slogan: '1235人购买'
					},
					{
						goods_id: 2,
						img: '/static/image/index/img/p3.jpg',
						name: '平安行·国内自助游保险',
						price: '88',
						slogan: '1235人购买'
					},
					{
						goods_id: 3,
						img: '/static/image/index/img/p4.jpg',
						name: '企业团体综合意外险',
						price: '1.9',
						slogan: '1235人购买'
					},
					{
						goods_id: 4,
						img: '/static/image/index/img/p5.jpg',
						name: '平安行·境内自驾旅游保险',
						price: '442',
						slogan: '1235人购买'
					},
					{
						goods_id: 5,
						img: '/static/image/index/img/p6.jpg',
						name: '平安行·境内节假日旅游保险',
						price: '257',
						slogan: '1235人购买'
					},
					{
						goods_id: 6,
						img: '/static/image/index/img/p7.jpg',
						name: '平安行·境内高原旅游保险',
						price: '0.2',
						slogan: '1235人购买'
					},
					{
						goods_id: 7,
						img: '/static/image/index/img/p8.jpg',
						name: '儿童综合医疗保险',
						price: '1400',
						slogan: '1235人购买'
					},
					{
						goods_id: 8,
						img: '/static/image/index/img/p9.jpg',
						name: '女性关爱保险',
						price: '70',
						slogan: '1235人付款'
					},
					{
						goods_id: 9,
						img: '/static/image/index/img/p10.jpg',
						name: '全球交通意外保险',
						price: '74.5',
						slogan: '1235人购买'
					}
				],
				headerPosition: "fixed",
				loadingText: "正在加载...",
				getApplicationStatus: "",

			};
		},
		mounted() {
			setTimeout(() => {
				this.$refs.app_update.update(); //调用子组件检查更新方法
				setTimeout(() => {
					if (this.$refs.app_update.popup_show == true && this.$refs.app_update.force == true) {
						uni.hideTabBar()
					}
				}, 100)
			}, 2000)
		},
		computed: {
			...mapState(['avatar', 'userInfo'])
		},


		onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			if (e.scrollTop >= 0) {
				this.headerPosition = "fixed";
			} else {
				this.headerPosition = "absolute";
			}
		},
		async onLoad() {
			// uni.startPullDownRefresh(); 
			let res = await this.$http.get('/apps/getApplicationStatus?jobNumber=' + this.userInfo.sysUser.id);
			if (res.code == 200) {
				if (res.data == '0') {
					this.getApplicationStatus = res.data;
				}
			} else {

			}
			let banner = await this.$http.get('/apps/getCarousel');
			this.swiperList = banner.data;
			this.bgColor = this.swiperList[0].color;
		},
		// async onReady() {
		// 	this.bgColor = this.swiperList[0].color;

		// },
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		async onPullDownRefresh() {
			let userInfoRes = await this.$http.get('/esmUserInternal/findById?id=' + this.userInfo.sysUser.id, {}, {});
			uni.stopPullDownRefresh();
			store.commit('setUserModules', {
				title: 'userInfo',
				data: userInfoRes.data
			})
			if (userInfoRes.data.sysUser.status == 2) {
				this.show = true;
			} else {
				this.show = false;
			}

		},
		//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
		onReachBottom() {
			uni.showLoading({
				mask: true,
				title: "Loading..."
			})
			let len = this.productList.length;
			if (len >= 40) {
				uni.hideLoading()
				this.loadingText = "到底了";
				return false;
			}
			let end_goods_id = this.productList[len - 1].goods_id;
			for (let i = 1; i <= 10; i++) {
				let goods_id = end_goods_id + i;
				let goods_name = this.productList[i - 1].name;
				let goods_price = this.productList[i - 1].price;
				let p = {
					goods_id: goods_id,
					img: '/static/image/index/img/p' + (goods_id % 10 == 0 ? 10 : goods_id % 10) + '.jpg',
					name: goods_name,
					price: goods_price,
					slogan: '1235人购买'
				};
				this.productList.push(p);
			}
			setTimeout(() => {
				uni.hideLoading()
			}, 1000)
		},

		async onShow() {
			if (this.userInfo.sysUser.status == '2') {
				this.show = true;
			} else {
				this.show = false;
			}

		},
		methods: {
			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;
				}

			},
			// 改变头部颜色
			swiperChange(event) {
				this.bgColor = this.swiperList[event.detail.current].color;
			},
			//扫一扫
			scan() {
				uni.scanCode({
					success: (res) => {
						uni.showToast({
							title: '条码内容：' + res.result
						});
					}
				});
			},
			//搜索跳转
			toSearch() {
				// uni.showToast({title: "建议跳转到新页面做搜索功能"});
			},
			//推荐商品跳转
			toPick(e) {
				// uni.showToast({title: '推荐商品'+e.goods_id});
			},
			//商品跳转
			toGoods(e) {
				// uni.showToast({title: '商品'+e.goods_id});
			},
		}
	};
</script>
<style>
	.icon {
		font-size: 50upx;
		font-style: normal;
		color: #ffffff;
	}

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

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

	.header .scan {
		width: 100upx;
		height: 100upx;
		flex-shrink: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.header .input {
		width: calc(100% - 200upx);
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.header .input input {
		width: calc(100% - 60upx);
		height: 60upx;
		background-color: #ffffff;
		border-radius: 60upx;
		padding-left: 60upx;
		font-size: 30upx;
	}

	.header .input .icon {
		width: 60upx;
		height: 60upx;
		position: absolute;
		color: #a18090;
		z-index: 996;
		top: 20upx;
		left: 0;
		font-size: 40upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.header .menu {
		background-color: #FFFFFF;
		border-radius: 50%;
		box-sizing: border-box;
		margin: 20upx;
		width: 60upx;
		height: 60upx;
		flex-shrink: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.header .menu image {
		width: 50upx;
		height: 50upx;
		border-radius: 60upx;
	}

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

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