xiamen-sb-uniapp/pages/setting/setting.vue

<template>
    <view>
        <view class="d-flex j-between px3 py2 border-bottom" @tap="updateInfo">
            <view class="f-size-30 text-color-3">姓名</view>
            <view class="d-flex a-center">
                <view class="f-size-26">{{ userInfo.realName }}</view>
                <view class="ml-2 text-color-9">
                    <view class="ml-2 text-color-9"> <u-icon name="arrow-right"></u-icon> </view>
                </view>
            </view>
        </view>
        <view class="d-flex j-between px3 py2 border-bottom a-center" @tap="updateInfo()">
            <view class="f-size-30 text-color-3">头像</view>
            <view class="d-flex a-center">
                <view class="f-size-26">
                    <image
                        :src="myAvatar"
                        @error="myDefaultAvatar"
                        mode=""
                        style="width: 60rpx; height: 60rpx; border-radius: 50%"
                    ></image>
                </view>
                <view class="ml-2 text-color-9">
                    <view class="ml-2 text-color-9"> <u-icon name="arrow-right"></u-icon> </view>
                </view>
            </view>
        </view>
        <view class="d-flex j-between px3 py2 border-bottom" @tap="updateInfo">
            <view class="f-size-30 text-color-3">部门</view>
            <view class="d-flex a-center">
                <view class="f-size-26">{{ userInfo.deptName }}</view>
                <view class="ml-2 text-color-9">
                    <view class="ml-2 text-color-9"> <u-icon name="arrow-right"></u-icon> </view>
                </view>
            </view>
        </view>

        <view class="d-flex j-between px3 py2 border-bottom" @tap="forget">
            <view class="f-size-30 text-color-3">修改密码</view>
            <view class="d-flex a-center">
                <view class="ml-2 text-color-9"> <u-icon name="arrow-right"></u-icon> </view>
            </view>
        </view>
        <view class="d-flex j-between px3 py2 border-bottom" @tap="getOpenId">
            <view class="f-size-30 text-color-3">绑定微信</view>
            <view class="d-flex a-center">
                <view class="ml-2 text-color-9"> <u-icon name="arrow-right"></u-icon> </view>
            </view>
        </view>
        <!--<view class="d-flex j-between px3 py2 border-bottom" @tap="about">
            <view class="f-size-30 text-color-3">关于我们</view>
            <view class="d-flex a-center">
                <view class="ml-2 text-color-9"> <u-icon name="arrow-right"></u-icon> </view>
            </view>
        </view>-->
        <button
            class="main-color-bg text-color-white logout"
            @tap="logoutShow = true">退出登录</button>
        <u-modal
            v-model="logoutShow"
            :content="'确认退出登录？'"
            :show-cancel-button="true"
            @confirm="logout"
        ></u-modal>
    </view>
</template>

<script>
export default {
    data() {
        return {
            logoutShow: false,
            myAvatar: '',
            openId: null,
            userInfo: {
                realName: null,
                deptName: null
            },
            form: {
                name: '张三',
                department: '技术部',
                pic: '../../static/images/user_pic.png'
            }
        };
    },
    onShow() {
        this.userInfo = this.$BaseTool.UserUtil.getUserInfo();
        this.myAvatar = this.$BaseTool.UserUtil.getFileUrl(this.userInfo.avatar);
        this.openId = this.userInfo.openId
    },
    methods: {
        myDefaultAvatar() {
            this.myAvatar = '/static/images/user_pic.png'
        },
        // editdepartment
        editDepartment() {
            uni.navigateTo({
                url: '../edit-name/edit-name?department=' + this.form.department
            });
        },
        // editName
        editName() {
            uni.navigateTo({
                url: '../edit-name/edit-name?name=' + this.form.name
            });
        },
        getOpenId() {
            // #ifdef H5
            this.$Http.getWechatRedirectUrl().then((res) => {
                uni.showToast({
                    title: '跳转微信授权……',
                    duration: 5000
                });
                window.location.href = res.data
            });
            // #endif
            // #ifndef H5
            uni.login({
                provider: 'weixin',
                success(res) {
                    this.$Http.getWechatOpenId(res.code).then((res) => {
                        uni.showToast({
                            title: '授权成功，请重新登录'
                        });
                        this.logout();
                    });
                }
            })
            // #endif
        },
        getSubscribe() {
            var tmplIds = ['3xLMrIa0X5yPiLaFk******rXqi9qPsvLUKKq4'] // 模板ID
            // #ifdef H5
            uni.showToast({
                title: '请从小程序登录后，订阅消息',
                icon: 'none'
            });
            // #endif
            // #ifndef H5
            uni.requestSubscribeMessage({
                tmplIds: tmplIds,
                success: (res) => { // 用户点击确定
                    for (const key in res) {
                        if (res[key] === 'accept') {
                            uni.showToast({
                                title: '已允许消息推送'
                            })
                            this.sendMessage(key)
                        } else {

                        }
                    }
                },
                fail: (errMessage) => {
                    console.log('订阅消息 失败 ', errMessage);
                }
            })
            // #endif
        },
        // 修改头像
        handlePic(flag) {
            console.log(111, flag, !flag)
            if (!flag) {
                return
            }
            const that = this
            uni.chooseImage({
                success(chooseImageRes) {
                    const tempFilePaths = chooseImageRes.tempFilePaths
                    const choseFileList = chooseImageRes.tempFiles
                    // 校验文件
                    for (const choseFile of choseFileList) {
                        const item = choseFile.name
                        if (that.$BaseTool.Object.isNotBlank(item) && item.length > 3) {
                            const itemSub = item.substr(item.length - 3)
                            if (itemSub !== 'PNG' &&
                                itemSub !== 'png' &&
                                itemSub !== 'peg' &&
                                itemSub !== 'PEG' &&
                                itemSub !== 'jpg' &&
                                itemSub !== 'JPG' &&
                                itemSub !== 'GIF' &&
                                itemSub !== 'gif' &&
                                itemSub !== 'bmp' &&
                                itemSub !== 'BMP') {
                                uni.showToast({ icon: 'none', title: '请上传图片' })
                                return
                            }
                        }
                    }
                    uni.showLoading({ title: '正在上传', mask: true })
                    try {
                        this.$Http.uploadImageList(tempFilePaths).then(fileResult => {
                            const imageListResult = []
                            fileResult.forEach(item => {
                                if (item != null) {
                                    imageListResult.push(item)
                                }
                            })
                            if (imageListResult.length > 0) {
                                that.imagesList = that.imagesList.concat(imageListResult)
                            }
                        }, () => {
                        }).catch(err => console.log(err))
                            .finally(function() {
                                uni.hideLoading()
                            })
                    } catch (e) {
                        uni.hideLoading()
                    }
                }
            })
        },
        // 关于我们
        about() {
            uni.navigateTo({
                url: '/pages/about/about'
            });
        },
        // 忘记密码
        forget() {
            uni.navigateTo({
                url: '/pages/setting/forget-password'
            });
        },
        updateInfo() {
            uni.navigateTo({
                url: '/pages/setting/update-setting'
            });
        },
        // 退出登录
        logout() {
            uni.removeStorageSync('userInfo');
            uni.removeStorageSync('accessToken');
            uni.redirectTo({
                url: '/pages/login/login'
            });
        }
    }
};
</script>

<style scoped>
.logout {
    width: 600rpx;
    height: 100rpx;
    margin: 100rpx auto 0;
    border-radius: 80rpx;
}
</style>