websoft-uniapp/package/user/personal.vue

<template>
	<view class="page" v-if="form">
		<view class="avatar">
			<uv-avatar :src="form.avatarUrl" size="100"></uv-avatar>
			<text class="web-text-placeholder">更换头像</text>
		</view>
		<!-- 其他功能 -->
		<uni-card :border="false" :is-shadow="false" :padding="0">

			<view class="order-body web-cell-align-top">
				<uv-form labelPosition="left" :model="form" :rules="rules" ref="form">
					<uv-form-item prop="form.phone" borderBottom>
						<uv-cell title="手机号码" :value="form.phone">
							{{ userInfo.phone }}
						</uv-cell>
					</uv-form-item>
					<uv-form-item prop="form.realName" borderBottom>
						<uv-cell title="真实姓名" :value="form.realName">
							<template v-slot:value>
								<uv-input placeholder="请输入真实姓名" v-model="form.realName" maxlength="11"></uv-input>
							</template>
						</uv-cell>
					</uv-form-item>
					<uv-form-item prop="form.idCard" borderBottom>
						<uv-cell title="身份证号码" :value="form.idCard">
							<template v-slot:right-icon>
								<uv-icon size="40rpx" name="camera" @click="onIdCard(item)"></uv-icon>
							</template>
						</uv-cell>
					</uv-form-item>
				</uv-form>
			</view>
		</uni-card>
		<view class="btn-bar">
			<uv-button class="save-user-profile"
				:customStyle="{background: 'linear-gradient(to right, #70b915, #008e04)',borderRadius: '30px',color: '#ffffff'}"
				text="保存" @click="save"></uv-button>
		</view>
		<!-- 登录组件 -->
		<ws-login ref="login" :logo="logo" @done="reload" />
	</view>
</template>

<script>
	import {
		useUserStore
	} from '@/store/modules/user';
	import * as UserApi from '@/api/booking/users';
	import * as MpMenuApi from '@/api/cms/mp-menu/index';
	import {
		getWxOpenId
	} from '@/api/passport/login';
	import {
		openUrl
	} from '@/utils/common';

	import {
		useTenantStore
	} from '@/store/modules/tenant';

	const tenantStore = useTenantStore();

	const userStore = useUserStore();

	export default {
		data() {
			return {
				statusBarHeight: 104,
				isLogin: false,
				form: null,
				userInfo: {},
				fields: {},
				logo: '',
				bookingUser: {},
				server: [],
				order: [],
			}
		},
		onLoad() {
			this.reload()
		},
		methods: {
			async reload(e) {
				const app = this
				// 当前登录用户信息
				const userInfo = await userStore.fetchUserInfo();
				if (Object.keys(userInfo).length > 0) {
					app.isLogin = true
					app.form = userInfo
					// 获取用户副表信息
					UserApi.getByPhone({
						phone: userInfo.phone
					}).then(data => {
						if (data) {
							app.form = Object.assign({}, app.form, data);
						}
					})
				} else {
					app.isLogin = false
					app.form = {}
				}
				// 菜单数据
				MpMenuApi.listMpMenu({}).then(res => {
					app.server = res.filter(d => d.type == 0)
					app.order = res.filter(d => d.type == 1)
				})

			},
			navTo(item) {
				if (!this.isLogin) {
					this.$refs.login.open('bottom')
					return false;
				}
				openUrl(item);
			},
			// 弹出登录提示框
			openLogin() {
				if (!this.isLogin) {
					this.$refs.login.open('bottom')
					return false;
				}
			},
			save() {

			}
		}
	}
</script>
<style>
	page {
		background-size: 100%;
		background-repeat: no-repeat;
		background-color: #f0f2f5;
		width: 750rpx;
		overflow-x: hidden;
	}
</style>
<style lang="scss">
	.avatar {
		padding: 20px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 14px;
	}

	.save-user-profile {
		width: 700rpx;
		margin: 40rpx auto;
	}

	.btn-bar {
		width: 700rpx;
		margin: auto;
		clear: both;
	}
</style>