mabao/pages/index/mine.vue

<template>
	<view class="main">
		<view class="pr">
			<view class="header-content">
				<image src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/img/mybanner.png" style="width:100%;height:260rpx;"></image>
			</view>
			<view class="pr" style="z-index:2">
				<view class="plr15">
					<view class="bdr4 pb20">
						<view class="m-dpflex m-justify-start m-align-center" style="height: 165rpx;">
							<!-- <image binderror="_binderror" mode="scaleToFill" :src="info.avatar||" style="width: 120rpx;height: 120rpx;border-radius: 50%;"></image> -->
							<u-avatar :src="info.avatar" mode="circle" size="120"></u-avatar>
							<text class="line1 f20 fb plr15 text-white" style="width: 220rpx;">{{info.nickname||'用户02958472'}}</text>
							<navigator hoverClass="none" :url="'editinfo?name='+info.nickname+'&phone='+info.phone">
								<image class="header-img" src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/toolimg/myedit.png"></image>
							</navigator>
							<view class="pr tr m-flex" style="display: flex; justify-content: flex-end; ">
								<!-- <view class="tip msg" v-if="true"></view> -->
								<navigator hoverClass="none" url="message" style="width: 50rpx;">
									<image style="width: 50rpx;height: 50rpx;" class="header-img" src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/toolimg/myinfo.png"></image>
									<view class="cu-tag badge text-xs" v-if="mseeage!=''">{{mseeage}}</view>
								</navigator>
							</view>
						</view>
						<view class="pr m-xcenter plr20 header-box" style="padding: 40rpx 40rpx;background-color: #fff;border-radius: 16rpx;">
							<navigator class="m-flex tl f14 m-ycenter dpb" hoverClass="none" url="../personal/personal_information">
								<view class="m-gray-big f20 fb pr10">{{(info.balance/100)||'0'}}</view>
								<view class="m-gray-letter mt5 f12">余额（元）</view>
							</navigator>
							<view @click="gocoupon" class="m-flex tl f14 m-ycenter">
								<view class="m-gray-big f20 fb">{{info.coupon_num||'0'}}</view>
								<view class="m-gray-letter mt5 f12">优惠券（张）</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="fb f18 plr20">我的订单</view>
			<view class="margin-lr-sm m-dpflex m-justify-start m-align-center overflow bg-white margin-top-sm" style="padding-top: 40rpx;padding-bottom: 40rpx;border-radius: 16rpx;box-shadow: 0 0 50rpx 0 rgba(0, 0, 0, 0.1);">
				<navigator class="width25 m-ycenter overflow pr" v-for="(item,index) in icons" :key="index" hoverClass="none"
				 @click="gotoinfoorder(item.name)">
					<image style="width: 76rpx;height: 76rpx;" :src="item.image" mode=""></image>
					<!-- <view class="tip"></view> -->
					<view class="f14 m-gray-small mt10 line1">{{item.name}}</view>
				</navigator>
				<!-- <navigator class="width25 m-ycenter overflow pr" hoverClass="none" url="../common_tools/my_consulting/my_appointment">
					<image style="width: 76rpx;height: 76rpx;" src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/img/myyuyue.png"
					 mode=""></image>
					<view class="tip"></view>
					<view class="f14 m-gray-small mt10 line1">我的预约</view>
				</navigator>
				<navigator class="width25 m-ycenter overflow pr" hoverClass="none" url="../common_tools/my_consulting/my_opinion">
					<image style="width: 76rpx;height: 76rpx;" src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/img/myyijian.png"
					 mode=""></image>
					<view class="tip"></view>
					<view class="f14 m-gray-small mt10 line1">我的意见单</view>
				</navigator>
				<navigator class="width25 m-ycenter overflow pr" hoverClass="none" url="../service_box/box_details">
					<image style="width: 76rpx;height: 76rpx;" src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/img/myservice.png"
					 mode=""></image>
					<view class="tip"></view>
					<view class="f14 m-gray-small mt10 line1">服务包订单</view>
				</navigator> -->
			</view>
			<navigator class="pr m-xcenter plr20 pt20" hoverClass="none" url="../archives/my_archives">
				<view class="fb f18 pr m-flex tl">健康档案</view>
				<view class="pr m-gray-small">档案列表</view>
				<label class="m-gray-letter iconfont icon-arrow-right f18 dpb"></label>
			</navigator>
			<view class="mt20 pr pb40" style="margin-left: 20rpx;margin-right: 20rpx;box-shadow: 0 0 50rpx 0 rgba(0, 0, 0, 0.1);height:380rpx;">
				<navigator class="m-ycenter" hoverClass="none" style="padding-top: 174rpx;" url="../archives/add_archives" v-if="!istrue">
					<view class="bdr30 m-theme br-theme tc plr20 pt8 pb8 f14 width40">新增健康档案</view>
					<!-- <view class="pt20 f12 m-gray-letter">点击添加新的健康档案</view> -->
				</navigator>
				<swiper duration="500" @change="swiperChange" v-if="istrue" :current="itemcurrent" interval="5000" style="height:380rpx;"
				 class="swiper-box">
					<swiper-item class="" style="box-sizing: border-box;" v-for="(ite,index) in patientList" :key="index">
						<view class="bg-white" style="border-radius: 16rpx;height: 100%;">
							<view @click="gotoinfo(ite)" style="height: 100%;">
								<view class="fb f18 pt20 margin-left">{{ite.name}}</view>
								<view class="f14 m-gray-letter pt10 margin-left">年龄：<text class="text-black">{{ite.age||'0岁'}}</text></view>
								<view class="plr10 m-dpflex m-justify-start m-align-center overflow pb30 pt30" style="margin-top:60rpx;border-top: 2rpx solid rgb(248,248,248);">
									<view class="width33 m-ycenter overflow pr">
										<view class="fb f18">{{ite.order_num}}</view>
										<view class="f12 m-gray-small mt6 line1">病例信息</view>
									</view>
									<view class="width33 m-ycenter overflow pr">
										<view class="fb f18">{{ite.pack_docter_num}}</view>
										<view class="f12 m-gray-small mt6 line1">就诊记录</view>
									</view>
									<view class="width33 m-ycenter overflow pr">
										<view class="fb f18">{{ite.perfectd_degree}}</view>
										<view class="f12 m-gray-small mt6 line1">个人资料</view>
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="dots">
					<view :class="index==itemcurrent?'dot active':'dot'" v-for="(item,index) in patientList.length" :key="index"></view>
				</view>
			</view>
			<view class="fb f18 plr20 pt40">常用工具</view>
			<view class="bg-white margin-lr-sm margin-top-sm" style="border-radius: 16rpx;box-shadow: 0 0 50rpx 0 rgba(0, 0, 0, 0.1);">
				<view class="plr10 m-dpflex m-justify-start m-align-center overflow pt30 pb30">
					<navigator class="width25 m-ycenter overflow pr" hoverClass="none" url="/pages/common_tools/home_doctor">
						<image style="width: 42rpx;height: 42rpx;" src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/toolimg/mydoctor.png"></image>
						<view class="f14 m-gray-small mt10 line1">家庭医生</view>
					</navigator>
					<navigator class="width25 m-ycenter overflow pr" hoverClass="none" url="/pages/common_tools/me_follow">
						<image style="width: 42rpx;height: 42rpx;" src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/toolimg/myguanzhu.png"></image>
						<view class="f14 m-gray-small mt10 line1">我的关注</view>
					</navigator>
					<navigator class="width25 m-ycenter overflow pr" hoverClass="none" url="/pages/common_tools/collection/collection">
						<image style="width: 42rpx;height: 42rpx;" src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/toolimg/wenzhang.png"></image>
						<view class="f14 m-gray-small mt10 line1">收藏文章</view>
					</navigator>
					<navigator class="width25 m-ycenter overflow pr" hoverClass="none" url="/pages/common_tools/me_order/me_order">
						<image style="width: 42rpx;height: 42rpx;" src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/toolimg/baodan.png"></image>
						<!-- <view class="tip"></view> -->
						<view class="f14 m-gray-small mt10 line1">我的保单</view>
					</navigator>
				</view>
				<view class="plr10 m-dpflex m-justify-start m-align-center overflow pb30">
					<navigator class="width25 m-ycenter overflow pr" hoverClass="none" url="/pages/common_tools/me_evaluate">
						<image style="width: 42rpx;height: 42rpx;" src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/toolimg/pinjia.png"></image>
						<view class="f14 m-gray-small mt10 line1">我的评价</view>
					</navigator>
					<navigator class="width25 m-ycenter overflow pr" hoverClass="none" url="/pages/personal/coupon/couponList">
						<image style="width: 42rpx;height: 42rpx;" src="../../static/img/collarvolume.png"></image>
						<view class="f14 m-gray-small mt10 line1">领卷中心</view>
					</navigator>
					<navigator class="width25 m-ycenter overflow pr" hoverClass="none" url="/pages/common_tools/help_feedback/help_feedback">
						<image style="width: 42rpx;height: 42rpx;" src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/toolimg/myhple.png"></image>
						<view class="f14 m-gray-small mt10 line1">帮助反馈</view>
					</navigator>
					<view class="width25 m-ycenter overflow pr" @click="customer">
						<image style="width: 42rpx;height: 42rpx;" src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/toolimg/kefu.png"></image>
						<view class="f14 m-gray-small mt10 line1">客服咨询</view>
					</view>
				</view>
			</view>
			<view class="footer">
				<image style="width: 200rpx;height: 72rpx;" src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/img/logo.png"
				 mode=""></image>
				<text style="font-size: 24rpx;color: rgba(0,0,0,.3);margin-top: 15rpx;">宝宝少生病 / 妈妈更省心 / 家人更安心</text>
			</view>
		</view>
		<view class="cu-tabbar-height"></view>
		<view class="cu-tabbar-height"></view>
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import IMService from "../../common/goeasyimutil.js"
	var user = require('../../common/user.js');
	import store from '@/store'
	export default {
		onLoad(options) {
			this.getindexImg()
			this.$util.getAgreement().then(res => {
				this.phone = res.data.phone
			}).catch(err => {

			})
		},
		onShow() {
			this.getUserInfo()
			this.getarchives()
			if (getApp().globalData.imService == null) {
				let user = uni.getStorageSync('user')
				getApp().globalData.imService = new IMService();
				let loginResult = getApp().globalData.imService.login({
					flag: user.flag,
					nickname: user.nickname,
					avatar: user.avatar
				});
				if (loginResult) {
					//连接IM
					getApp().globalData.imService.connectIM();
				}
			}
			this.imService = getApp().globalData.imService;
			this.imService.onConversationsUpdate = (conversations) => {
				this.conversations = conversations;
				this.setUnreadAmount();
			};
			var promise = this.imService.latestConversations();
			promise.then(res => {
				this.conversations = res.content;
				console.log("conversations load successfully")
				this.setUnreadAmount();
				console.log(this.conversations)
				uni.hideLoading();
			}).catch(e => {
				console.log(e)
			});
		},
		data() {
			return {
				itemcurrent: 0,
				info: {},
				istrue: false,
				patientList: [],
				conversations: {
					unreadTotal: 0,
					conversations: []
				},
				imService: null,
				mseeage: "",
				icons: []
			}
		},
		methods: {
			getindexImg: async function() {
				let res = await this.$request.post("/api/v1/common/icons", {
					type: 3
				})
				if (res.status == 200) {
					this.icons = res.data
					console.log(this.icons, ">>>>>>>>>>>>>>>>>>>>")
				}
			},
			gotoinfoorder(name) {
				switch (name) {
					case "我的咨询":
						uni.navigateTo({
							url: "../common_tools/my_consulting/my_consulting"
						})
						break;
					case "我的预约":
						uni.navigateTo({
							url: "../common_tools/my_consulting/my_appointment"
						})
						break;
					case "我的意见单":
						uni.navigateTo({
							url: "../common_tools/my_consulting/my_opinion"
						})
						break;
					case "服务包订单":
						uni.navigateTo({
							url: "../service_box/box_details"
						})
						break;
					default:
						break;
				}
			},
			setUnreadAmount() {
				if (this.conversations.unreadTotal > 0) {
					this.mseeage = this.conversations.unreadTotal.toString()
					uni.setTabBarBadge({
						index: 2,
						text: this.conversations.unreadTotal.toString()
					})
				} else {
					this.mseeage = ""
					uni.hideTabBarRedDot({
						index: 2
					})
				}
			},
			customer() {
				uni.makePhoneCall({
					phoneNumber: this.phone
				})
			},
			swiperChange(e) {
				this.itemcurrent = e.detail.current
			},
			getUserInfo: async function() {
				let res = await this.$request.post('/api/v1/user/userInfo', {}, false)
				let status = user.islogin(res)
				if (status) {
					this.info = res.data
					this.info.flag = 'member_' + this.info.id
					store.commit('setUser', this.info)
					if (this.info.is_set_pay_password == 0) {
						uni.showModal({
							title: "提示",
							content: "尚未设置支付密码，是否前往设置",
							confirmText: "去设置",
							success: (res) => {
								if (res.confirm) {
									uni.navigateTo({
										url: "paypassword"
									})
								}
							}
						})
					}
					// getApp().globalData.imService = new IMService();
					// let loginResult = getApp().globalData.imService.login(e.detail.userInfo);
					// if (loginResult) {
					// 	//连接IM
					// 	getApp().globalData.imService.connectIM();
					// }
				}
			},
			gotoinfo(ite) {
				uni.navigateTo({
					url: "../archives/archives_info?id=" + ite.id
				})
			},
			getarchives: async function() {
				let res = await this.$request.post("/api/v1/patient/patientList", {}, false)
				if (res.status == 0) {
					this.patientList = res.data.data
					console.log(this.patientList)
					if (this.patientList.length != 0) {
						this.istrue = true
					}
				}
			},
			gocoupon() {
				uni.navigateTo({
					url: "../personal/coupon/coupon"
				})
			}
		}
	};
</script>

<style scoped>
	@import url("./mine.css");

	.footer {
		text-align: center;
		padding-top: 15rpx;
		padding-bottom: 15rpx;
		position: absolute;
		bottom: -200rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.header-content {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: -1;
		overflow: hidden;
		box-sizing: border-box;
	}

	.header-box {
		box-shadow: 0px 8rpx 34rpx -6rpx rgba(248, 151, 164, 0.13);
	}

	.header-img {
		width: 36rpx;
		height: 36rpx;
	}

	.tip {
		position: absolute;
		top: 0;
		right: 20%;
		bottom: 0;
		background-color: red;
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
	}

	.msg {
		top: -3rpx;
		right: -9rpx;
	}

	swiper {
		height: 320rpx;
	}

	.swiper-wrapper {
		padding: 0 10rpx;
		box-sizing: border-box;
	}

	.swiper-item {
		width: 100%;
		height: 300rpx;
		box-shadow: 0 26rpx 40rpx 0 rgba(255, 255, 255, 0.31);
		background: url("http://file.supermm.me/miniProgram/images/personal/bg_doc.png") no-repeat bottom center;
	}

	.dots {
		position: absolute;
		left: 0;
		right: 0;
		bottom: -40rpx;
		display: flex;
		justify-content: center;
	}

	.dots .dot {
		margin: 0 8rpx;
		width: 14rpx;
		height: 14rpx;
		background: #E4E4E4;
		border-radius: 8rpx;
		transition: all .6s;
	}

	.dots .dot.active {
		width: 24rpx;
		background: rgb(153, 153, 153);
	}

	.game-wrap {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
		box-sizing: border-box;
	}

	.game-item {
		height: 100%;
		background: url("https://file.supermm.me/h5/wechat-h5/integral/personeBg001.jpg") no-repeat;
		background-size: 100% 100%;
		background-position: center center;
		border-radius: 100rpx;
	}
</style>