tiantian-care-wx/pages/mine/index.vue

<template>
	<view class="wrap">
		<view class="mine">
			<view class="mine-top">
				<view class="">
					<image src="../../static/resource/imgs/share_img.jpg" mode=""></image>
					<text>{{wxUserInfo.username?wxUserInfo.username:'微信用户'}}</text>
				</view>
				<view class="">
					<u-icon name="arrow-right" size="28" color="#eceded"></u-icon>
				</view>
			</view>
			<view class="mine-bottom">
				<view class="">
					<view>¥{{balance}}</view>
					<view>盈余</view>
				</view>
				<view class="">
					<view>¥0</view>
					<view>已用</view>
				</view>
				<view class="">
					<view>¥<text>0</text>元</view>
					<view>欠费</view>
				</view>
			</view>
		</view>
		<view class="setting">
			<block v-for="item in settingList">
				<view class="setting-item" @click="toSetting(item.id)">
					<button style="width: 100%;height: 57rpx;opacity: 0;position: absolute;" open-type="share" v-if="item.id=='share'" />
					<button style="width: 100%;height: 57rpx;opacity: 0;position: absolute;" open-type="feedback" v-if="item.id=='feedback'" />
					<view class="setting-item-left">
						<image :src="item.src" :style="{width:item.width,height:item.height}"></image>
						<view>{{item.title}}</view>
					</view>
					<view class="setting-item-right">
						<u-icon name="arrow-right" size="28" color="#333"></u-icon>
					</view>
				</view>
			</block>

		</view>
		<tabbar :current-page="4"></tabbar>
	</view>
</template>

<script>
	import tabbar from "../../components/tabbar/tabbar.vue"
	import util from "../../utils/util.js";
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				balance: 0,
				wxUserInfo: null,
				loading: true,
				settingList: [{
					id: 'order',
					title: '我的订单',
					src: require('@/static/resource/icon/icon_mine_1.png'),
					width: '31rpx',
					height: '31rpx',
				}, {
					id: 'feedback',
					title: '问题反馈',
					src: require('@/static/resource/icon/icon_mine_2.png'),
					width: '32rpx',
					height: '31rpx',
				}, {
					id: 'fund',
					title: '资金明细',
					src: require('@/static/resource/icon/icon_mine_3.png'),
					width: '32rpx',
					height: '25rpx',
				}, {
					id: 'share',
					title: '分享',
					src: require('@/static/resource/icon/icon_mine_4.png'),
					width: '32rpx',
					height: '31rpx',
				}, {
					id: 'setting',
					title: '授权设置',
					src: require('@/static/resource/icon/icon_mine_setting.png'),
					width: '31rpx',
					height: '30rpx',
				}, {
					id: 'quit',
					title: '退出',
					src: require('@/static/resource/icon/icon_mine_quit.png'),
					width: '28rpx',
					height: '28rpx',
				}]
			}
		},
		onShareAppMessage() {},
		onLoad() {
			this.loadInfo()
		},
		onReady() {},
		onHide() {},
		methods: {
			loadInfo: function() {
				var that = this;
				util.request({
					api: 'customer/me',
					method: 'POST',
					customLoading: false,
					bindThis: that,
					utilSuccess: function(n) {
						that.balance = n.balance
						that.wxuserInfo = n
						// that.loading = fasle
					},
					utilFail: function(t) {
						util.alert(t);
					}
				});
			},
			toSetting(id) {
				switch (id) {
					case 'order':
						uni.switchTab({
							url: '/pages/order/index'
						})
						break;
					case 'fund':
						uni.navigateTo({
							url: '/packages/packagesInfo/pages/moneyList/list'
						})
						break;
					case 'share':

						// 该对象已集成到this.$u中，内部属性如下
						this.$u.mpShare = {
							title: '护工一站式服务',
							path: '/pages/index/index',
							imageUrl: '/static/resource/imgs/share_img.jpg'
						}
						break;
					case 'setting':
						uni.openSetting()
						break;
					case 'quit':
						uni.clearStorageSync()
						uni.switchTab({
							url: '/pages/index/index'
						})
						break;
					default:
						break;
				}

			},
		}
	}
</script>

<style lang="scss">
	.wrap {
		height: 100vh;
		width: 100vw;
		background: linear-gradient(to bottom, #0cc7a4, #E7F5F4 20%);
		padding: 30rpx;

		.mine {
			background-color: #fff;
			margin-bottom: 40rpx;
			padding: 30rpx;

			&-top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10rpx 0 30rpx 0;
				border-bottom: 1px solid #eceded;
				margin-bottom: 30rpx;
				font-size: 32rpx;

				>view {
					&:first-child {
						display: flex;
						align-items: center;
					}
				}

				image {
					width: 115rpx;
					height: 115rpx;
					border-radius: 100%;
					margin-right: 20rpx;
				}
			}

			&-bottom {
				display: flex;
				justify-content: space-around;

				>view {
					color: #696766;
					text-align: center;

					view {
						&:first-child {
							font-size: 32rpx;
							color: #333;
						}
					}

					text {
						color: #f96f40;
						margin: 0 5rpx;
					}
				}
			}

		}

		.setting {
			background-color: #fff;
			border-radius: 10rpx;
			padding: 30rpx;

			&-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 0rpx;
				font-size: 28rpx;
				color: #333;
				border-bottom: 1px solid #eceded;

				& image {

					vertical-align: middle;
					margin: 0 auto
				}

				&-left {
					display: flex;
					align-items: center;

					>image {
						text-align: center;
						margin-right: 10rpx
					}
				}
			}
		}
	}
</style>