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

<template>
	<view>
		<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)">
						<image :src="category.img" style="width: 50px;height: 50px;"></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: true,
			},
			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 = 150 * 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.usertype == 'A') {
					return uni.showToast({
						icon: "none",
						title: '没有权限',
						duration: 1500
					})
				}
				if (this.userInfo.sysUser.status == '2') {
					uni.showToast({
						icon: "none",
						title: '请先通过实名认证',
						duration: 1500
					})
				} 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)
					}
				}

				// if (this.userInfo.sysUser.status == '2') {
				// 	let res = await this.$http.get('/apps/getApplicationStatus?jobNumber=' + this.userInfo.sysUser.id);
				// 	if (res.code == 200) {
				// 		this.getApplicationStatus = res.data;
				// 		if (this.getApplicationStatus == '0') {
				// 			if (!e.src || e.src == '#' || e.src == '') {
				// 				uni.showToast({
				// 					icon: "none",
				// 					title: '正在开发中...',
				// 					duration: 1500
				// 				})
				// 			} else {
				// 				uni.showToast({
				// 					icon: "none",
				// 					title: '该账户已删除',
				// 					duration: 1500
				// 				})
				// 			}
				// 		} else if (this.getApplicationStatus == '3') {
				// 			if (!e.src || e.src == '#' || e.src == '') {
				// 				uni.showToast({
				// 					icon: "none",
				// 					title: '正在开发中...',
				// 					duration: 1500
				// 				})
				// 			} else {
				// 				uni.showToast({
				// 					icon: "none",
				// 					title: '实名认证不通过，请修改后提交',
				// 					duration: 1500
				// 				})
				// 				setTimeout(() => {
				// 					uni.navigateTo({
				// 						url: '/pages/user/certification'
				// 					})
				// 				}, 1000)
				// 			}
				// 		}
				// 		else if (this.getApplicationStatus == '2') {
				// 			uni.showToast({
				// 				icon: "none",
				// 				title: '请先通过实名认证',
				// 				duration: 1500
				// 			})
				// 		}
				// 	} else {
				// 		if (!e.src || e.src == '#' || e.src == '') {
				// 			uni.showToast({
				// 				icon: "none",
				// 				title: '正在开发中...',
				// 				duration: 1500
				// 			})
				// 		} else {
				// 			this.show();
				// 			setTimeout(() => {
				// 				uni.navigateTo({
				// 					url: '/pages/user/infoInput'
				// 				})
				// 			}, 1000)
				// 		}
				// 	}
				// } 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)
				// 	}
				// } else {
				// 	this.show1 = false;
				// }
			},
			xueliConfirm(e) {
				this.form.xueli = e[0].value;
			},
			//更新分类指示器
			categoryChange(event) {
				this.currentPageindex = event.detail.current;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dots {
		display: flex;
		justify-content: center;
		height: 15upx;
		width: 100%;
	}

	.dots>view {
		width: 30upx;
		height: 5upx;
		background-color: rgba(0, 0, 0, 0.2);
	}

	.dots>view.active {
		background-color: #0A98D5;
	}

	.swiper {
		padding: 10upx 0upx;
	}

	.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%;
		height: 150upx;
		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>