xk-client-wx/pages/mine/mine.vue

<template>
	<view class="container safe-area-inset-bottom">
		<!-- 头部 -->
		<view class="head">
			<view class="head_img">
				<image :src="infoList.user.avatarurl || '/static/mine/mr_tx.png' " mode=""></image>
			</view>
			<view class="head_info">
				<view class="head_name">
					{{infoList.user.nickname || '微信用户'}}
				</view>
				<view class="head_id" @click="toInfo">
					个人主页
					<text class="iconfont icon-jiantou1"></text>
				</view>
			</view>
			<view class="head_icon" @click="toSet">
				<text class="iconfont icon-bg-setup"></text>
			</view>
		</view>

		<!-- 我的订单 -->
		<view class="card_order">
			<view class="title">
				产品订单

				<view class="all" @click="toAll(0)">
					查看全部 <text class="iconfont icon-jiantou1"></text>
				</view>
			</view>
			<view class="info">
				<view class="item" @click="toAll(1)" style="position: relative;">
					<image src="/static/mine/dfk.png" mode=""></image>
					<text>待付款</text>
					<u-badge type="error" :count="infoList.ProductOrder.unpay" :offset="[-2,20]"></u-badge>
				</view>

				<view class="item" @click="toAll(2)" style="position: relative;">
					<image src="/static/mine/dfh.png" mode=""></image>
					<text>待发货</text>
					<u-badge type="error" :count="infoList.ProductOrder.wait_send" :offset="[-2,20]"></u-badge>
				</view>

				<view class="item" @click="toAll(3)" style="position: relative;">
					<image src="/static/mine/dsh.png" mode=""></image>
					<text>待收货</text>
					<u-badge type="error" :count="infoList.ProductOrder.wait_accept" :offset="[-2,20]"></u-badge>
				</view>

				<view class="item" @click="toAll(4)">
					<image src="/static/mine/tk.png" mode=""></image>
					<text>已完成</text>
				</view>
			</view>
		</view>

		<!-- 我的记录 -->
		<view class="card" v-if="isShow_envVersion==false">
			<view class="title">
				我的记录
			</view>

			<!-- 列表 -->
			<view class="list">
				<!-- <navigator url="../../subPackages/my/myorder" class="infos">
					<image src="@/static/mine/01.png" mode=""></image>
					<text>问诊记录</text>
				</navigator> -->
				<navigator url="../../subPackages/my/myrecord" class="infos">
					<image src="@/static/mine/02.png" mode=""></image>
					<text>处方记录</text>
				</navigator>
				<navigator url="../../subPackages/my/myappiont" class="infos">
					<image src="@/static/mine/03.png" mode=""></image>
					<text>挂号记录</text>
				</navigator>
			</view>
		</view>

		<!-- 常用工具 -->
		<view class="card">
			<view class="title">
				常用工具
			</view>

			<!-- 列表 -->
			<view class="list">
				<navigator class="infos" url="../../subPackages/my/myinfo" v-if="isShow_envVersion==false">
					<image src="@/static/mine/jzr.png" mode=""></image>
					<text>就诊人管理</text>
				</navigator>
				<navigator url="../../subPackages/setup/area-list" class="infos">
					<image src="@/static/mine/gy.png" mode=""></image>
					<text>收货地址</text>
				</navigator>
				<navigator url="../../subPackages/setup/customer-service" class="infos">
					<image src="@/static/mine/kfzx.png" mode=""></image>
					<text>客服中心</text>
				</navigator>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getuserInfo
	} from '../../request/api/api'
	export default {
		data() {
			return {
				infoList: [],
				isShow_envVersion:uni.getStorageSync('isShow_envVersion')
			}
		},
		onLoad() {

		},
		methods: {
			toInfo() {
				uni.navigateTo({
					url: '/subPackages/my/mycollection'
				})
			},
			toAll(e) {
				uni.navigateTo({
					url: '/subPackages/my/my-drug/drug-list?index=' + e
				})
			},
			toSet() {
				uni.navigateTo({
					url: '/subPackages/setup/filed'
				})
			},

			// 用户信息
			getInfo() {
				getuserInfo({
					method: "post",
					data: {
						store_id: uni.getStorageSync('store_id') || 11001
					}
				}).then((res) => {
					// console.log(res, 'ingo');
					if (res.data.errcode == 0) {
						this.infoList = res.data.data
					}
				})
			},
		},
		mounted() {
			this.getInfo();
		},
		onShow() {
			this.getInfo();
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		max-height: 100%;
		width: 100vw;
		min-height: 100vh;
		width: 100vw;
		height: 100vh;
		background: #F8FAFC;
		padding-bottom: env(safe-area-inset-bottom);

		.head {
			width: 750rpx;
			height: 168rpx;
			background: #4175EE;
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 40rpx;

			.head_img {
				width: 116rpx;
				height: 116rpx;
				margin-right: 30rpx;

				image {
					width: 116rpx;
					height: 116rpx;
					border-radius: 50%;
					vertical-align: middle;
				}
			}

			.head_info {
				width: 500rpx;

				.head_name {
					font-size: 28rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
				}

				.head_id {
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					margin-top: 12rpx;

					.iconfont {
						font-size: 24rpx;
						color: #fff;
						margin-left: 12rpx;
					}
				}
			}

			.head_icon {

				.iconfont {
					font-size: 52rpx;
					color: #fff;
				}
			}
		}

		.card_order {
			width: 750rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			border: 2rpx solid #FFFFFF;
			padding: 32rpx 54rpx;

			.title {
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #232323;
				margin-bottom: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.all {
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #999999;

					.iconfont {
						font-size: 24rpx;
						color: #999999;
						margin-left: 8rpx;
					}
				}
			}

			.info {
				width: 646rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin: 0 auto;

				.item {
					width: 120rpx;
					display: flex;
					flex-direction: column;
					align-items: center;

					image {
						width: 80rpx;
						height: 80rpx;
						margin-bottom: 24rpx;
					}

					text {
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #232323;
					}
				}
			}
		}

		.card {
			width: 710rpx;
			height: 268rpx;
			background-color: #fff;
			border-radius: 8rpx;
			margin: 20rpx auto;
			padding: 32rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.title {
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #232323;
				word-spacing: 2rpx;
				margin-bottom: 14rpx;
			}

			.list {
				width: 626rpx;
				display: flex;
				align-items: center;
				margin: 0 auto;

				.infos {
					width: 140rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-right: 60rpx;

					image {
						width: 80rpx;
						height: 80rpx;
						vertical-align: middle;
						margin-bottom: 12rpx;
					}

					text {
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #232323;
					}
				}
			}
		}
	}
</style>