jje_uniapp/myPages/serviceObjectInfo/index.vue

<template>
    <view class="user-info-wrap">
        <view class="nav-bar">
            <view class="nav-content">
                <view class="nav-info">
                    <view class="nav-desc">
                        <view class="nav-name">
                            <view class="">头像</view>
                        </view>
                    </view>
                    <view @click="uploadImg1(1)" class="arrow-right">
                        <view class="head-img">
                            <image :src="userInfo.facePhotoUrl || '/static/me/u4.png'" mode=""></image>
                        </view>
                    </view>
                </view>
            </view>
            <view class="custom-line"></view>
            <view class="cotent-from">
                <u--form
                        labelPosition="left"
                        :model="userInfo"
                        :rules="rules"
                        ref="form1"
                >
                    <u-form-item
                            label="昵称"
                            prop="nickName"
                            labelWidth="auto"
                            labelAlign="right"
                    >
                        <u--input
                                v-model="userInfo.nickName"
                                placeholder="请输入昵称"
                                border="bottom"
                                maxlength="20"
                                type="text"
                        ></u--input>
                    </u-form-item>
                    <u-form-item
                            labelWidth="auto"
                            labelAlign="right"
                            label="关系"
                            prop="blood"
                            width="120"
                    >
                        <u--input
                                maxlength="20"
                                v-model="userInfo.blood"
                                placeholder="请输入关系"
                                border="bottom"
                                type="text"
                        ></u--input>
                    </u-form-item>
                    <u-form-item
                            labelWidth="auto"
                            labelAlign="right"
                            label="备注"
                            prop="remark"
                            width="120"
                    >
                        <u--input
                                maxlength="20"
                                v-model="userInfo.remark"
                                placeholder="请输入备注"
                                border="bottom"
                                type="text"
                        ></u--input>
                    </u-form-item>
                </u--form>
            </view>
        </view>

        <view @click="saveUserInfo()" class="sure-btn">
            <view class="btn">确认</view>
        </view>

    </view>
</template>

<script>

    export default {
        data() {
            return {
                userInfo: {
                    auth: true,
                    nickName: '',
                    facePhoto: '',
                    blood: '',
                    remark: '',
                    id: ''
                },
                genderShow: false,
                value1: '2023-12-12',
                imgUrl1: '',
                rules:[]
            };
        },
        mounted() {
        },
        onShow(){
            if (this.userInfo.facePhoto){
                this.getImgUrlByOssId(this.userInfo.facePhoto)
            }
        },
        onLoad(option) {

            console.log('++++++++++++++++option+++++++++++++++',option)
            if(option.data){
                this.userInfo = JSON.parse(option.data);
                if (this.userInfo.facePhoto){
                    this.getImgUrlByOssId(this.userInfo.facePhoto)
                }
            }
        },
        methods: {

            getImgUrlByOssId(Id){
                if (Id) {
                    this.$api.getImage(Id).then(res=>{
                        this.userInfo.facePhotoUrl = res.data.data[0].url.replace(/^http:/, "https:")
                        this.$set(this.userInfo)
                    });
                }
            },

            // 保存用户信息
            saveUserInfo(){

                if(!this.userInfo.nickName){
                    uni.showToast({
                        title: "请填写昵称"
                    })
                    return;
                }
                if(!this.userInfo.blood){
                    uni.showToast({
                        title: "请填写关系"
                    })
                    return;
                }
                if(!this.userInfo.remark){
                    uni.showToast({
                        title: "请填写备注"
                    })
                    return;
                }
                this.userInfo.auth = true;

                if(this.userInfo.opType == '1'){ // 绑定
                    // 保存数据
                    this.$api.bindServiceObject(this.userInfo).then((res)=>{
                        // 去服务对象列表页
                        uni.navigateTo({
                            url: '/myPages/ServiceObjectManagement/index',
                        })
                    }).catch(() =>{
                        uni.showToast({
                            title: "操作失败"
                        })
                    });
                }else if(this.userInfo.opType == '2'){ // 修改
                    // 修改数据
                    this.$api.updateServiceObject(this.userInfo).then((res)=>{
                        // 去服务对象列表页
                        uni.navigateTo({
                            url: '/myPages/ServiceObjectManagement/index',
                        })
                    }).catch(() =>{
                        uni.showToast({
                            title: "操作失败"
                        })
                    });
                }
            },
            //头像上传
            uploadImg1(imgIndex) {
                let that = this;
                uni.chooseImage({
                    count: 1,
                    success: (chooseImageRes) => {
                        const tempFilePaths = chooseImageRes.tempFilePaths;

                        uni.uploadFile({
                            url: that.$baseUrl  + '/resource/oss/upload', //仅为示例，非真实的接口地址
                            filePath: tempFilePaths[0],
                            name: 'file',
                            header: {
                                'Authorization': 'Bearer ' + uni.getStorageInfo('accessToken'),
                            },
                            success: (uploadFileRes) => {
                                let res = JSON.parse(uploadFileRes.data)
                                that.userInfo.facePhotoUrl = res.data.url.replace(/^http:/, "https:");
                                that.userInfo.facePhoto = res.data.ossId
                            }
                        });
                    }
                });
            }
        }
    };
</script>

<style lang="scss">
    .user-info-wrap{
        margin-left: 12px;
        margin-right: 12px;
        /* 导航菜单 */
        .nav-bar{
            background: #fff;
            border-radius: 10px;
            margin-top: 12px;
            .cotent-from{
                padding-right: 12px;
                padding-left: 12px;
            }
            /* 商店信息 */
            .nav-content{
                padding-right: 6px;
                padding-top: 10px;
                padding-bottom: 6px;
                .nav-info{
                    display: flex;
                    justify-content: space-between;
                    padding-left: 10px;
                    align-items: center;
                    .logo {
                        width: 12%;
                        text-align: center;
                        image{
                            width: 24px;
                            height: 24px;
                        }
                    }
                    .nav-desc{
                        width: 46%;
                        display: flex;
                        line-height: 30px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        align-items: center;
                        .custom-input{
                            font-size: 12px;
                        }
                        .nav-name{
                            width: 60%;
                            font-size: 14px;

                            color: #333333;
                            line-height: 22px;
                        }
                        .change-store{
                            text-align: right;
                            width: 40%;
                            font-size: 12px;
                            color: #333333;
                            line-height: 22px;
                        }
                    }

                    .arrow-right{
                        width: 50px;
                        height: 50px;
                        display: flex;
                        justify-content: flex-end;

                        .head-img {
                            width: 50px;
                            height: 50px;
                            border-radius: 25px;
                            image{
                                width: 50px;
                                height: 50px;
                                border-radius: 25px;
                            }
                        }
                        .change-store{
                            font-size: 14px;
                            color: #999;
                            line-height: 22px;
                        }
                    }
                }
            }
        }

        .sure-btn{
            margin-top: 20px;
            width: 100%;
            .btn{
                text-align: center;
                height: 42px;
                background: #FFE05C;
                border-radius: 27px;
                color: #333333;
                line-height: 42px;
                margin-top: 12px;
                font-size: 14px;
            }
        }
    }

</style>