partnerApp/components/modules/index/index-nav.vue

<template>
	<view>
		<swiper style="resistanceRatio : 0" class="swiper" :style="'height: '+currentPageHeight+'upx;'" duration="300"
			@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 mode="widthFix" :src="category.img"></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
			}
		},
		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) {
				
				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') {
					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 (!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>