vue-insagent-app/pages/my/my.vue

<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<!-- 头部信息Start -->
		<view class="headers " :style="headerStyle">
			<view class="dis a-c j-c">
				<text>我的</text>
				<image @tap="tool" src="/static/image/my/Frame.png" mode=""></image>
			</view>
		</view>
		<view class="Personnel">
			<view class="dis a-c" @tap="openDetail">
				<image :src="avatar" class="avatar" mode=""></image>
				<view class="info">
					<view class="dis a-c">
						<text>{{userInfo.sysUser.name}}</text>
						<u-tag :text="userInfo.sysUser.status=='1'?'已认证':'未认证'" mode="dark"
							style="background: linear-gradient( 268deg, #FF8B2F 0%, #FF5A00 100%);" />
					</view>
					<text>你身边最贴心，最权威的保险咨询专家。</text>
				</view>
			</view>
			<view class="my-wallet">
				<view class="wallet-body dis f-c">
					<view class="dis a-c j-s route">
						<view class="flex-1 dis f-c a-c" @tap="accountTool('/pages/wallet/wallet')">
							<image src="/static/image/my/qianbao.png" mode=""></image>
							<text>钱包</text>
						</view>
						<view class="flex-1 dis f-c a-c" @tap="accountTool('/pages/wallet/bankCard')">
							<image src="/static/image/my/ka.png" mode=""></image>
							<text>银行卡</text>
						</view>
						<view class="flex-1 dis f-c a-c" @tap="accountTool()">
							<image src="/static/image/my/chongzhi.png" mode="">
							</image>
							<text>充值</text>
						</view>
					</view>


				</view>
			</view>
		</view>
		<view class="my-tools">
			<view class="header ">
				<text>我的工具</text>
			</view>
			<view class="order-body d-flex a-center">
				<!-- 因为swiper特性的关系，请指定swiper的高度 ，swiper的高度并不会被内容撑开-->
				<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode" :dots-styles="dotsStyles">
					<swiper style="height:calc(324upx)" class="swiper" @change="change">
						<swiper-item class="swiper" v-for="(count,cindex) of  toolsListLength" :key="count">
							<uni-grid :column="4" :show-border="false" :square="false" :highlight="false"
								@change="toTools($event,'toolsList')">
								<uni-grid-item class="" v-show="(index>=(cindex)*8) && (index<(cindex+1)*8)"
									v-for="(item ,index) in toolsList" :index="index" :key="item.text">
									<view class="grid-item-box dis a-c j-c f-c">
										<view class="icon iconfont" :class="item.icon">
										</view>
										<text class="text">{{item.text}}</text>
										<u-badge v-if="item.text=='客户管理'" size="mini" type="error" :count="InsureCount"
											:offset="[10, 10]"></u-badge>
									</view>
								</uni-grid-item>
							</uni-grid>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>

			</view>
		</view>
		<!-- 我的工具End -->

		<!-- 售后管理Start -->
		<view class="my-tools">
			<view class="header d-flex a-center j-sb">
				<view>售后管理</view>
			</view>
			<view class="order-body d-flex a-center">
				<!-- 因为swiper特性的关系，请指定swiper的高度 ，swiper的高度并不会被内容撑开-->
				<swiper style="height:calc(162upx)" class="swiper" :indicator-dots="(serviceListLength!=1)?true:false">
					<swiper-item class="swiper dis a-c" v-for="(count,cindex) of  serviceListLength" :key="count">
						<uni-grid :column="4" :show-border="false" :square="false" :highlight="false"
							@change="toTools($event,'serviceList')">
							<uni-grid-item v-show="(index>=(cindex)*8) && (index<(cindex+1)*8)"
								v-for="(item ,index) in serviceList" :index="index" :key="item.text">
								<view class="grid-item-box dis a-c  f-c">
									<image :src="item.image" mode=""></image>
									<text class="text">{{item.text}}</text>
								</view>
							</uni-grid-item>
						</uni-grid>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 售后管理End -->

		<!-- 我的关于Start -->
		<view class="my-tools">
			<view class="header d-flex a-center j-sb">
				<view>关于掌柜</view>
			</view>
			<view class="order-body d-flex a-center">
				<!-- 因为swiper特性的关系，请指定swiper的高度 ，swiper的高度并不会被内容撑开-->
				<swiper style="height:calc(162upx)" class="swiper" :indicator-dots="(aboutListLength!=1)?true:false">
					<swiper-item class="swiper dis a-c" v-for="(count,cindex) of  aboutListLength" :key="count">
						<uni-grid :column="4" :show-border="false" :square="false" :highlight="false"
							@change="toTools($event,'aboutList')">
							<uni-grid-item class="d-flex a-center j-center"
								v-show="(index>=(cindex)*8) && (index<(cindex+1)*8)" v-for="(item ,index) in aboutList"
								:index="index" :key="item.text">
								<view class="grid-item-box d-flex a-center j-center flex-column">
									<image :src="item.image" mode=""></image>
									<text class="text">{{item.text}}</text>
								</view>
							</uni-grid-item>
						</uni-grid>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<!-- 我的关于End -->

		<!-- 菜单Start -->
		<!-- <block v-for="(item,index) in menusList" :key="index">
			<my-list-item :item="item" :index="index"></my-list-item>
		</block> -->
		<!-- 菜单End -->
		<u-modal v-model="modalshow" :show-title="false">
			<view class="slot-content dis a-c j-c" style="padding: 20px;">
				<img :src="promoImage" alt="" style="width: 150px;height: 150px;" />
			</view>
		</u-modal>
	</view>
</template>

<script>
	import store from '@/store';
	import {
		mapState,
		mapMutations
	} from "vuex"
	import zPopup from '@/components/common/z-popup.vue'
	import {
		pathToBase64,
		base64ToPath
	} from '@/common/image-tools-base64.js';
	import myListItem from "@/components/modules/my/my-list-item.vue";
	import QR from "@/common/wxqrcode.js"
	export default {
		components: {
			zPopup,
			myListItem
		},

		data() {
			return {
				promoImage: "",
				modalshow: false,
				info: ["", ""],
				dotsStyles: {
					backgroundColor: '#E5E5E5',
					selectedBackgroundColor: '#0052FF',
				},
				current: 0,
				mode: 'default',
				headerStyle: {
					backgroundColor: '',
					backgroundImage: '',
					backgroundSize: '',
					backgroundPosition: '',
					boxShadow: ''
					// 其他样式属性...
				},
				showBackground: false,
				prevScrollTop: 0,
				popupShow: false, //头像是否展示
				mystatusText: "已认证",
				prodetIntroShow: true, //显示滚动公告
				avatar: "",
				orderTypeList: [{
						icon: 'icon-jixurenwu',
						orderstatus: 0,
						text: '报价中',
						badge: '0',
						type: "primary",
						orderStage: 0,
						iconColor: '#0696FF'
					},
					{
						icon: 'icon-hebaozhong',
						orderstatus: 1,
						text: '待核保',
						badge: '0',
						type: "success",
						orderStage: 1,
						iconColor: '#FFA22A'
					},
					{
						icon: 'icon-querenzhifu',
						orderstatus: 2,
						text: '待缴费',
						badge: '0',
						type: "error",
						orderStage: 2,
					},
					{
						icon: 'icon-peisong',
						orderstatus: 3,
						text: '已承保',
						badge: '0',
						type: "error",
						orderStage: 3,
					},
				],
				toolsList: [{
						icon: 'icon-Frame-1',
						text: '会员分享',
						url: '/pages/tools/addStaff/addStaff',
					},
					{
						icon: 'icon-Frame',
						text: '会员管理',
						url: '/pages/tools/team/team',
					},
					{
						icon: 'icon-Frame-2',
						text: '客户管理',
						url: '/pages/tools/customer/customer',
					},
					{
						icon: 'icon-Frame-3',
						text: '业绩管理',
						url: '/pages/tools/achievement/achievement',
					},
					{
						icon: 'icon-Frame-5',
						text: '报案服务',
						url: '/pages/tools/insuranceClaims/insuranceClaims',
					},
					{
						icon: 'icon-Frame-4',
						text: '掌柜秘书',
						url: '/pages/tools/messageReminder/messageReminder',
					},
					{
						icon: 'icon-Frame-6',
						text: '保单',
						url: '/pages/tools/policy/policy',
					},
					{
						icon: 'icon-Frame-7',
						text: '计算器',
						url: '/pages/tools/calculator/calculator',
					},
					{
						icon: 'icon-a-02',
						text: '海报管理',
						url: '/pages/tools/poster/poster',
					},
					{
						icon: 'icon-a-01',
						text: '优惠劵',
						url: '/pages/tools/coupon/coupon',
					},
					{
						icon: 'icon-a-03',
						text: '掌柜商城',
					},
					{
						icon: 'icon-a-04',
						text: '车险之家',
						url: "/pages/carInsure/entry",
					},
					{
						icon: 'icon-renwuzhongxin',
						text: '任务中心',
						url: "/pages/ad/index",
					}
				],
				aboutList: [{
						image: '/static/image/my/Frame5.png',
						text: '常见问题',
						url: '/pages/set/question',
					},
					// { icon: 'icon-baodan',text: '意见反馈',url:'/pages/set/suggest',iconColor:'#DD525E'},
					{
						image: '/static/image/my/Frame6.png',
						text: '意见反馈',
						url: '',
					},
					{
						image: '/static/image/my/Frame7.png',
						text: '联系客服',
						tel: '4006333016',
					},
					{
						image: '/static/image/my/Frame8.png',
						text: '关于我们',
						url: '/pages/set/about',
					}
				],
				serviceList: [{
						image: '/static/image/my/Frame1.png',
						text: '发票申请',
						popup: '此功能还未开放,有需要请联系客服',
					},
					{
						image: '/static/image/my/Frame2.png',
						text: '保单批改',
						popup: '此功能还未开放,有需要请联系客服',
					},
					{
						image: '/static/image/my/Frame3.png',
						text: '申请退保',
						popup: '此功能还未开放,有需要请联系客服',
					},
					{
						image: '/static/image/my/Frame4.png',
						text: '自助理赔',
						popup: '此功能还未开放,有需要请联系客服',
					}
				],
				menusList: [{
						icon: "shangcheng",
						name: "掌柜商场",
						clicktype: "nothing",
						url: "",
						auth: true
					},
					{
						icon: "chexiandingdan",
						name: "车险之家",
						clicktype: "navigateTo",
						url: "/pages/carInsure/entry",
						auth: true
					}
				],
				InsureCount: 0,
			}
		},

		computed: {
			...mapState(['userInfo', "userCheckInfo", ]),
			toolsListLength() {
				// let length = Math.ceil(this.toolsList.length / 8);
				let list = ["1", "2"]
				return list;
			},
			aboutListLength() {
				return Math.ceil(this.aboutList.length / 4);
			},
			serviceListLength() {
				return Math.ceil(this.serviceList.length / 4);
			}
		},
		async onShow() {
			await this.getInsureCount();
			if (this.userInfo.sysUser.headSculpture) {
				this.avatar = this.$base.baseUrl + this.userInfo.sysUser.headSculpture;
			} else {
				this.avatar = "/static/image/my/avatar1.png"

			}
			if (this.userInfo.sysUser.status == '1') {
				this.mystatusText = "已认证";
			} else if (this.userStatus == '2') {
				this.mystatusText = "未认证";
			}
		},
		async onload() {
			await this.getInsureCount();
		},
		onPageScroll(e) {
			this.handleScroll(e);
		},
		mounted() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			});
			uni.$on('scroll', this.handleScroll);
		},
		destroyed() {
			uni.$off('scroll', this.handleScroll);
		},
		methods: {
			...mapMutations(['setUserModules', 'setOrderType', 'setOrderStage']),
			//头部颜色变化js
			change(e) {
				this.current = e.detail.current;
			},

			async getInsureCount() {
				let res = await this.$http.post('/insurance/order/getExpirationInsureCount');
				if (res.code == '200') {
					this.InsureCount = res.data;
				}
			},
			handleScroll(e) {
				const scrollTop = e.scrollTop;
				if (scrollTop > this.prevScrollTop) {
					// 向下滚动
					this.showBackground = true; // 显示背景图
				} else if (scrollTop < 50) {
					// 在顶部附近，隐藏背景图
					this.showBackground = false;
				} else {
					// 向上滚动
					this.showBackground = true; // 显示背景图
				}
				this.headerStyle.backgroundColor = this.showBackground ? '#fff' : 'transparent';
				this.headerStyle.backgroundImage = this.showBackground ? 'url("/static/image/my/banner.png")' : '';
				this.headerStyle.backgroundSize = this.showBackground ? 'cover' : '';
				this.headerStyle.backgroundPosition = this.showBackground ? 'center' : '';
				this.prevScrollTop = scrollTop;
			},
			tool() {
				uni.navigateTo({
					url: "/pages/set/set"
				})
			},
			//去工具页面
			async toTools(e, listName) {
				if (this.userInfo.sysUser.status == '2') {
					return uni.showToast({
						icon: "none",
						title: '请先通过实名认证',
						duration: 1500
					})
				}
				if (!!this[listName][e.detail.index].url && (this[listName][e.detail.index].url ==
						'/pages/wallet/wallet')) {
					if ((!!this.userInfo.esmUserInternal) && (!!this.userInfo.esmUserInternal.accountno)) {
						this.navigate({
							url: this[listName][e.detail.index].url
						}, "navigateTo", true)
					} else {
						this.navigate({
							url: '/pages/wallet/bindBank',
							complete: () => {
								setTimeout(() => {
									uni.showToast({
										title: '请先绑定银行卡',
										duration: 3000,
										icon: "none"
									});
								}, 500);

							}
						}, "navigateTo", true)
					}
				} else if (this[listName][e.detail.index].url) {
					this.navigate({
						url: this[listName][e.detail.index].url
					}, "navigateTo", true)
				} else if (this[listName][e.detail.index].tel) {
					uni.makePhoneCall({
						phoneNumber: this[listName][e.detail.index].tel,
					})
				} else if (this[listName][e.detail.index].popup) {
					let res = await this.$http.get('/sys/qy/wechat/find/picture');
					if (res.code == '200') {
						this.promoImage = QR.createQrCodeImg(res.data.wechatPictureUrl, {
							size: parseInt(200) //二维码大小  
						})
						this.modalshow = true;
					} else {
						uni.showModal({
							showCancel: false,
							content: this[listName][e.detail.index].popup,
						});
					}

				} else {
					uni.showToast({
						title: this[listName][e.detail.index].text + '更新中...',
						icon: 'none'
					})
				}

			},
			async accountTool(path) {

				if (path) {
					if (path == '/pages/wallet/bankCard') {
						let res = await this.$http.post('/userBank/getUserBankList', {
							auditStatus: '',
						});
						if (!res.data.length) {
							this.navigate({
								url: '/pages/wallet/bindBank',
								complete: () => {
									setTimeout(() => {
										uni.showToast({
											title: '请先绑定银行卡',
											duration: 3000,
											icon: "none"
										});
									}, 500);

								}
							}, "navigateTo", true)
						} else {
							this.navigate({
								url: path,
							}, "navigateTo", true)
						}
					} else {
						this.navigate({
							url: path,
						}, "navigateTo", true)
					}
				} else {
					uni.showToast({
						title: '功能待开发...',
						icon: "none"
					});
				}
			},
			// 去账单明细
			toBillDetails(type) {
				this.navigate({
					url: `/pages/wallet/billDetails${type}`,
				}, "navigateTo", true)
			},
			// 去账单明细
			toWallet(type) {
				this.navigate({
					url: "/pages/wallet/wallet"
				}, "navigateTo", true)
			},
			//跳转个人信息页面
			openDetail() {
				this.navigate({
					url: "/pages/user/userInfo"
				}, "navigateTo", false)
			},
			//跳转订单页面
			openOrder(e) {

				this.setOrderStage(this.orderTypeList[e].orderStage);
				this.navigate({
					url: "/pages/orders/orders"
				}, "switchTab", true)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	page {
		background-color: #F8FAFE;
	}

	.headers {
		position: fixed;
		top: 0;
		left: 0;
		height: auto;
		width: 100%;
		z-index: 999999;
		padding: 16px;
		padding-top: 50px;

		>view {
			width: 100%;
			height: 100%;
			position: relative;
		}

		image {
			position: absolute;
			right: 0;
			width: 20px;
			height: 20px;
		}

		text {
			font-size: 18px;
			font-weight: bold;
			color: #000;
		}
	}

	.Personnel {
		height: auto;
		width: 100%;
		background: #fff;
		background-image: url("/static/image/my/banner.png");
		background-size: 100% 100%;
		padding: 110px 16px 10px 16px;

		.avatar {
			width: 60px;
			height: 60px;
			border-radius: 50%;
		}

		.info {
			margin-left: 10px;

			text {
				margin-right: 10px;
				color: #333333;
				font-size: 13px;
			}

			text:last-child {
				color: rgba(51, 51, 51, 0.8);
				font-size: 12px;
			}

		}
	}

	.my-tools {
		padding: 0 16px;

		.header {
			padding: 10px 0;
			font-size: 14px;
			color: #232832;
			font-weight: bold;
		}

		.order-body {
			background: #fff;
			box-shadow: 0px 4px 10px 0px #DAE3F4;
			border-radius: 6px;
		}
	}

	/* 产品介绍Start */
	.prodet-intro {
		width: 100%;
		height: 70upx;
		background-color: #333;
		color: #3ae;
		white-space: nowrap;
		border-top: 1upx solid #666;
		border-bottom: 1upx solid #666;
		box-sizing: border-box;
	}

	.prodet-intro>view:nth-of-type(1) {
		width: 60upx;
		height: 100%;
		flex-shrink: 1;
		padding-left: 20upx;
		font-size: 36upx;
	}

	.prodet-intro>view:nth-of-type(2) {
		overflow: hidden;
		line-height: 70upx;
		font-size: 24upx;
	}

	.prodet-intro>view:nth-of-type(3) {
		width: 60upx;
		padding-right: 20upx;
		flex-shrink: 1;
		height: 100%;
		font-size: 36upx;
	}

	.animate {
		padding-left: 40rpx;
		display: inline-block;
		white-space: nowrap;
		animation: 20s wordsLoop linear infinite normal;
	}

	@keyframes wordsLoop {
		0% {
			transform: translateX(750rpx);
			-webkit-transform: translateX(750rpx);
		}

		100% {
			transform: translateX(-100%);
			-webkit-transform: translateX(-100%);
		}
	}

	/* 产品介绍End */



	/* 个人信息Start */

	/* 个人信息End */

	/* 我的订单Start */
	.my-orders {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.my-orders,
	.wallet-body {
		position: relative;
		width: 95%;
		height: 180upx;
		background: #FFFFFF;
		border-radius: 20upx;
		box-shadow: 0upx 0upx 10upx #efeff4;
		overflow: hidden;
	}



	/* 我的订单End */

	/* 我的钱包Start */
	.my-wallet {
		.wallet-body {
			width: 100%;
			height: auto;
			padding: 8px 16px;
			background: #FFFFFF;
			box-shadow: 0px 4px 10px 0px #DAE3F4;
			border-radius: 6px;
			margin-top: 10px;

			.route {
				text {
					font-size: 12px;
					color: #333;
					font-weight: 400;
				}

				image {
					width: 45px;
					height: 40px;
				}
			}

			.money {
				padding: 8px 0;
				background-color: #F9F8FD;
				border-radius: 4px;
				margin-top: 8px;

				text {
					font-size: 12px;
					color: #333;
					font-weight: 400;
				}

			}
		}
	}

	/* 我的钱包End */

	/* 小的分项标题Start */



	/* 小的分项标题End */



	.grid-item-box {

		.icon {
			font-size: 26px;
		}

		.text {
			font-size: 12px;
		}

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

	.swiper {
		width: 100%;
	}

	.swiper-view .keep-out {
		width: 100%;
		height: 30upx;
		border-radius: 100% 100% 0 0;
		margin-top: -15upx;
		position: absolute;
	}

	.swiper-view .swiper {
		overflow: hidden;
		padding: 30upx 20upx 0;
		box-sizing: border-box;
		width: 100%;
		height: 200upx;
	}

	.swiper-view .swiper image {
		width: 100%;
		height: 200upx;
	}
</style>