vue-insagent-app/components/modules/index/index-nav.vue

<template>
	<view class="pages">
		<swiper style="resistanceRatio : 0" class="swiper" :style="'height: '+currentPageHeight+'upx;'"
			:duration="duration" :interval="interval" :autoplay="autoplay" @change="categoryChange">
			<swiper-item v-for="(page, pageindex) in categoryList" :key="pageindex">
				<view class="category-list">
					<view class="icon" v-for="category in page" :key="category.cat_id" @tap="tapEvent(category)"
						v-if="category.featureHideHandling">
						<image :src="category.img" :style="{width:category.width,height:category.height}" mode="">
						</image>
						<view class="category-title">{{ category.title }}</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="dots">
			<view v-for="(page, pageindex) in categoryList" :key="pageindex"
				:class="{ active: pageindex == currentPageindex }"></view>
		</view>
		<u-toast :type="type" ref="uToast"></u-toast>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from "vuex";
	import {
		pathToBase64,
		base64ToPath
	} from '@/common/image-tools-base64.js';
	import bankBin from "@/common/bankcardinfo.js"
	export default {
		props: {
			resdata: Array,
			row: {
				type: Number,
				default: 2
			},
			autoplay: { //自动轮播
				type: Boolean,
				default: false,
			},
			duration: { //切换时长
				type: Number,
				default: 500
			},
			interval: { //间隔时长
				type: Number,
				default: 5000
			}
		},
		data() {
			return {
				xuelishow: false,
				border: false,
				form: {
					name: "",
					identifyNumber: "",
					identifyValidDate: "",
					address: "",
					name4: "",
					name5: "",
					xueli: "",
				},
				labelPosition: 'left',
				errorType: ['message'],

				type: 'warning',
				title: '请先实名认证',
				icon: true,
				position: 'center',
				url: '',
				show1: false,
				content: '慈母手中线，游子身上衣',
				contentSlot: true,
				showTitle: false,
				asyncClose: false,
				currentPageindex: 0,
				currentPageHeight: "310upx",
				getApplicationStatus: "",
			}
		},
		computed: {
			categoryList() {
				this.currentPageHeight = 120 * this.row + 10;
				let totalPages = Math.floor(this.resdata.length / (this.row * 5));
				if (this.resdata.length % (this.row * 5) != 0) {
					totalPages += 1;
				}
				let list = [];
				for (let i = 0; i < totalPages; i++) {
					let item = [];
					item = this.resdata.slice(this.row * 5 * i, this.row * 5 * (i + 1));
					list.push(item)
				}
				return list;
			},
			...mapState(['userInfo'])
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			// 验证银行卡
			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 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;
							})

					}
				});
			},
			show() {
				this.$refs.uToast.show({
					title: this.title,
					position: this.position,
					type: this.type,
					icon: this.icon,
					duration: 1000,
				});
			},

			event(item) {},
			//分类跳转
			async tapEvent(e) {
				console.log(e);
				this.form.name = "";
				this.form.identifyNumber = "";
				this.form.identifyValidDate = "";
				this.form.address = "";
				this.form.name4 = "";
				this.form.name5 = "";
				this.form.xueli = "";
				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.$emit('authModal', 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 (!e.src || e.src == '#' || e.src == '') {
						uni.showToast({
							icon: "none",
							title: '正在开发中...',
							duration: 1500
						})
					} else {
						this.navigate({
							url: e.src
						}, "navigateTo", true)
					}
				}


			},
			xueliConfirm(e) {
				this.form.xueli = e[0].value;
			},
			//更新分类指示器
			categoryChange(event) {
				this.currentPageindex = event.detail.current;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pages {
		background: #FFFFFF;
		box-shadow: 0px 2px 5px 0px rgba(95, 107, 132, 0.05);
		border-radius: 6px;
		padding: 10px 10px;
		border-bottom: 1px solid #E2E6EC;
	}

	.dots {
		display: flex;
		justify-content: center;
		height: 15upx;
		width: 100%;
	}

	.dots>view {
		width: 30upx;
		height: 5upx;

		background-color: #E5E5E5;
	}

	.dots>view.active {
		border-radius: 2px;
		background-color: #0052FF;
	}

	.swiper {
		padding-bottom: 8upx;

	}

	.category-list {
		width: 100%;
		height: auto;
		display: flex;
		justify-content: flex-start;
		flex-flow: wrap;
	}

	.category-title {
		font-size: 25upx;
	}

	.icon {
		margin-top: 5upx;
		margin-bottom: 5upx;
		width: 20%;
		display: flex;
		flex-flow: wrap;
		justify-content: center;
		font-size: 25upx;
		color: #666;
	}

	.icon image {
		margin: 5upx;
		width: 65%;
	}

	.icon>view {
		width: 100%;
		display: flex;
		justify-content: center;
	}
</style>