medical-record-client/src/pages/user/index.vue

<template>
    <view class="page">
        <u-cell-group>
            <u-cell title="手机号" :value="info.phone" />
            <u-cell title="头像" isLink @click="handleAvatar">
                <u-avatar slot="value" :src="info.avatar" />
            </u-cell>
            <u-cell title="姓名" :value="info.name" isLink @click="openModal('姓名', 'name')" />
            <u-cell title="性别" :value="info.sex_text" isLink @click="openGender" />
            <u-cell title="生日" :value="info.birthday_format" isLink @click="openBirthday" />
            <u-cell title="住址" :value="info.address" isLink @click="openModal('住址', 'address')" />
            <u-cell title="登录密码" isLink @click="openModal('新密码', 'password', 'password')" />
        </u-cell-group>
        <u-modal
            :show="modal.show"
            :title="modal.title"
            :showCancelButton="true"
            :closeOnClickOverlay="true"
            :asyncClose="true"
            @confirm="confirmModal"
            @cancel="closeModal"
            @close="closeModal"
        >
            <u--input :type="modal.input_type" v-model="modal.value" border="surround" />
        </u-modal>
        <u-action-sheet
            :show="gender.show"
            :actions="gender.options"
            :closeOnClickOverlay="true"
            @close="closeGender"
            @select="selectGender"
        />
        <u-datetime-picker
            v-model="birthday.value"
            mode="date"
            :show="birthday.show"
            :closeOnClickOverlay="true"
            :minDate="birthday.minDate"
            @close="openBirthday"
            @cancel="closeBirthday"
            @confirm="selectBirthday"
        />
    </view>
</template>

<script>
import gender from '../../enums/gender'
export default {
    data() {
        return {
            info: {},
            modal: {
                show: false,
                title: '',
                input_type: 'text',
                key: '',
                value: ''
            },
            gender: {
                show: false,
                options: gender.options
            },
            birthday: {
                show: false,
                value: (new Date).getTime(),
                minDate: (new Date('1900/1/1')).getTime()
            }
        }
    },
    onLoad() {
        this.init()
    },
    methods: {
        init() {
            this.$ajax.get('/api/client/user/profile').then(res => {
                if (res.status == 0) {
                    this.info = res.data
                }
            })
        },
        handleAvatar() {
            uni.chooseImage({
                count: 1,
                success: async (res) => {
                    let res1 = await this.$ajax.upload('/api/web/upload', {
                        filePath: res.tempFilePaths[0],
                        custom: { toast: false, loading: false },
                        name: 'file'
                    })
                    uni.showLoading()
                    if (res1.status == 0) {
                        let res2 = await this.update({ avatar: res1.data.file })
                        if (res2.status == 0) {
                            this.info.avatar = res1.data.file
                        }
                    }
                }
            });
        },
        openModal(title, name, type) {
            if (type) {
                this.modal.input_type = type
            }
            this.modal.title = title
            this.modal.key = name
            this.modal.show = true
            this.modal.value = this.info[name]
        },
        confirmModal() {
            const key = this.modal.key
            const value = this.modal.value
            const params = {}
            params[key] = value
			this.update(params).then(res => {
                this.modal.show = false
                if (res.status == 0) {
                    this.info[key] = value
                }
            })
        },
        closeModal() {
            this.modal.show = false
        },
        openGender() {
            this.gender.show = true
        },
        closeGender() {
            this.gender.show = false
        },
        selectGender(e) {
            this.update({ sex: e.value }).then(res => {
                if (res.status == 0) {
                    this.info.sex_text = e.name
                    this.info.sex = e.value
                }
            })
        },
        openBirthday() {
            if (this.info.birthday) {
                this.birthday.value = (new Date(this.info.birthday.replaceAll('-', '/'))).getTime()
            }
            this.birthday.show = true
        },
        closeBirthday() {
            this.birthday.show = false
        },
        selectBirthday(e) {
            const value = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
            this.update({ birthday: value }).then(res => {
                if (res.status == 0) {
                    this.info.birthday = this.info.birthday_format = value
                    this.closeBirthday()
                }
            })
        },
        update(params) {
            return this.$ajax.post('/api/client/user/profile', params, { custom: { loading: true } })
        }
    }
}
</script>

<style>
    .page {
        padding: 20px 0;
        box-sizing: border-box;
    }
    .page ::v-deep .u-cell-group {
        background: white;
    }
</style>