jje_uniapp/myPages/serviceObjectAllInfo/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  class="arrow-right">
                        <view class="head-img" @click="uploadImg1(1)">
                            <image v-if="userInfo.facePhotoUrl" :src="userInfo.facePhotoUrl" mode=""></image>
                            <image v-else src="../../static/me/u1796.png" mode=""></image>
                        </view>
                        <!-- <u-icon name="arrow-right" color="#666" size="26"></u-icon> -->
                    </view>
                </view>
            </view>
            <view class="custom-line"></view>
            <view class="nav-content">
                <view class="nav-info">
                    <view class="nav-desc">
                        <view class="nav-name">
                            <view class="">宝贝昵称</view>
                        </view>

                    </view>
                    <view class="arrow-right">
                        <input class="custom-input" v-model="userInfo.nickName" type="text" placeholder="请输入昵称">
                    </view>
                </view>
            </view>
            <view class="custom-line"></view>
            <view class="nav-content">
                <view class="nav-info">
                    <view class="nav-desc">
                        <view class="nav-name">
                            <view class="">宝贝性别</view>
                        </view>
                    </view>
                    <view @click="chooseGender()" class="arrow-right">
                        <view class="change-store">
                            <text v-if="userInfo.sex == 0">男</text>
                            <text v-else-if="userInfo.sex == 1">女</text>
                            <text v-else-if="userInfo.sex == 2">未知</text>
                            <text v-else>请选择性别</text>
                        </view>
                        <u-icon name="arrow-right" color="#666" size="16"></u-icon>
                    </view>
                </view>
            </view>
            <view class="custom-line"></view>
            <view class="nav-content">
                <view class="nav-info">
                    <view class="nav-desc">
                        <view class="nav-name">
                            <view class="">宝贝生日</view>
                        </view>
                    </view>
                    <view  class="arrow-right">

                        <picker mode="date" :value="date" :start="date"  @change="bindDateChange">
                            <view class="picker-change-store">
                                <text v-if="userInfo.birthday">{{userInfo.birthday}}</text>
                                <text v-else>请选择生日</text>
                                <u-icon name="arrow-right" color="#666" size="16"></u-icon>
                            </view>
                        </picker>
                    </view>
                </view>
            </view>
            <view class="custom-line"></view>
            <view class="nav-content">
                <view class="nav-info">
                    <view class="nav-desc">
                        <view class="nav-name">
                            <view class="">是否双胞胎</view>
                        </view>
                    </view>
                    <view class="arrow-right">
                        <view class="change-store">
                            <u-radio-group
                                    v-model="userInfo.ranksState"
                                    size="14"
                                    @change="handleRankChange"
                                    placement="row">
                                <u-radio activeColor="#eac00f" name="0" label="否"></u-radio>
                                <u-radio activeColor="#eac00f" name="1" label="是"></u-radio>
                            </u-radio-group>
                        </view>
                    </view>
                </view>
            </view>
            <view v-if="userInfo.ranksState == '1'" class="custom-line"></view>
            <view v-if="userInfo.ranksState == '1'" class="nav-content">
                <view class="nav-info">
                    <view class="nav-desc">
                        <view class="nav-name">
                            <view class="">宝贝排行</view>
                        </view>
                    </view>
                    <view class="arrow-right button-group">
                        <text class="button" @click="decrement">-</text>
                        <input class="custom-input-ranks" v-model="userInfo.ranks" type="number" >
                        <text class="button" @click="increment">+</text>
                    </view>
                    <!-- <view @click="gotoRealNameAuth()" class="arrow-right">
                        <view class="change-store">
                            <u-radio-group
                                v-model="userInfo.ranks"
                                 size="14"
                                placement="row">
                                <u-radio activeColor="#eac00f" name="1" label="老大"></u-radio>
                                <u-radio activeColor="#eac00f" name="2" label="老二"></u-radio>
                                <u-radio activeColor="#eac00f" name="3" label="老三"></u-radio>
                                <u-radio activeColor="#eac00f" name="4" label="老四"></u-radio>
                            </u-radio-group>
                        </view>
                    </view> -->
                </view>
            </view>
            <view class="custom-line"></view>
            <!-- <view class="nav-content">
                <view class="nav-info">
                    <view class="nav-desc">
                        <view class="nav-name">
                            <view class="">服务对象编号</view>
                        </view>
                    </view>
                    <view @click="gotoRealNameAuth()" class="arrow-right">
                        <view class="change-store">
                            <text>NTML0801</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="custom-line"></view> -->
            <view class="nav-content">
                <view class="nav-info">
                    <view class="nav-desc">
                        <view class="nav-name">
                            <view class="">关系</view>
                        </view>

                    </view>
                    <view class="arrow-right">
                        <input class="custom-input" v-model="userInfo.blood" type="text" placeholder="请输入关系">
                    </view>
                </view>
            </view>
            <view class="custom-line"></view>
            <view class="nav-content">
                <view class="nav-info">
                    <view class="nav-desc">
                        <view class="nav-name">
                            <view class="">是否监护人</view>
                        </view>
                    </view>
                    <view  class="arrow-right">
                        <view  class="change-store">
                            <u-radio-group
                                    size="14"
                                    v-model="userInfo.wardship"
                                    placement="row">
                                <u-radio class="radio-item" activeColor="#eac00f" name="1" label="否"></u-radio>
                                <u-radio class="radio-item" activeColor="#eac00f" name="2" label="是"></u-radio>
                            </u-radio-group>
                        </view>
                    </view>
                </view>
            </view>
            <view class="custom-line"></view>
            <view class="nav-content">
                <view class="nav-info">
                    <view class="nav-desc">
                        <view class="nav-name">
                            <view class="">备注</view>
                        </view>

                    </view>
                    <view class="arrow-right">
                        <input class="custom-input" v-model="userInfo.remark" type="text" placeholder="请输入备注">
                    </view>
                </view>
            </view>
        </view>

        <view @click="saveUserInfo()" class="sure-btn">
            <view class="btn">保存</view>
        </view>



        <!-- 性别选择 -->
        <u-picker :show="genderShow" keyName="gender"  @confirm="sureChooseGender" :columns="genderList"></u-picker>

    </view>
</template>

<script>

    export default {
        data() {
            return {
                userInfo: {
                    auth: true,
                    nickName: '',
                    sex: '1',
                    birthday: '',
                    selfPhoto: '',
                    memberType: '',
                    facePhotos: '',
                    facePhoto: '',
                    ranks: 0,
                    wardship: '2',
                    blood: '',
                    ranksState: '0',
                    facePhotoUrl: '',
                    name: '',
                    authBook: '',
                    signPhoto: ''
                },
                genderShow: false,
                date: Number(new Date()),
                // 服务时间
                genderList: [
                    [{gender:'男',id:'0'},
                        {gender:'女',id:'1'},
                        {gender:'未知',id:'2'}
                    ],
                ],
                imgUrl1: ''
            };
        },
        mounted() {
        },
        onLoad(option) {

            if(option.data){
                const data = JSON.parse(option.data);
                console.log('+++++++JSON.parse(option.data)++++++',option.data)
                this.userInfo.facePhotoUrl = data.facePhotoUrl;
                this.userInfo.facePhoto = data.facePhoto;
                this.userInfo.facePhotos = data.facePhoto;
            }
        },
        methods: {
            increment() {
                this.userInfo.ranks++;
            },
            decrement() {
                if (this.userInfo.ranks > 1) {
                    this.userInfo.ranks--;
                }
            },
            handleRankChange(value) {
                console.log('Rank changed:', value);
                this.userInfo.ranks = value;
                // 在这里处理值改变事件的逻辑
            },
            // 选择性别
            chooseGender(){
                this.genderShow = true;
            },
            // 选择值
            sureChooseGender(e){
                this.genderShow = false;
                this.userInfo.sex = e.value[0].id;
            },
            // 确定选择的服务日期
            bindDateChange(e){
                console.log(e)
                this.userInfo.birthday = e.detail.value
            },


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

                if(!this.userInfo.nickName){
                    uni.showToast({
                        title: "请认真填写宝贝昵称"
                    })
                    return;
                }
                if(!this.userInfo.blood){
                    uni.showToast({
                        title: "请认真填写关系"
                    })
                    return;
                }
                if(!this.userInfo.birthday){
                    uni.showToast({
                        title: "请认真填写宝贝生日"
                    })
                    return;
                }

                this.userInfo.auth = true;

                // 保存数据
                this.$api.saveServiceObject(this.userInfo).then((res)=>{
                    console.log(res)
                    uni.showToast({
                        title: "添加成功"
                    })
                    uni.redirectTo({
                        url: '/myPages/ServiceObjectManagement/index'
                    });
                })
            },
            //头像上传
            uploadImg1(imgIndex) {
                let that = this;
                uni.chooseImage({
                    count: 1,
                    success: (chooseImageRes) => {
                        const tempFilePaths = chooseImageRes.tempFilePaths;

                        uni.uploadFile({
                            url: that.$host + '/resource/oss/upload', //仅为示例，非真实的接口地址
                            filePath: tempFilePaths[0],
                            name: 'file',
                            header: {
                                // "Content-Type": "multipart/form-data",
                                // 'X-Access-Token': uni.getStorageSync('token'),
                                'Authorization': 'Bearer ' + that.$store.state.loginState.accessToken,
                            },
                            success: (uploadFileRes) => {
                                let res = JSON.parse(uploadFileRes.data)
                                console.log(res.data)
                                that.imgUrl1 = res.data.url;
                                that.userInfo.selfPhoto = 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;
            /* 商店信息 */
            .nav-content{
                padding-right: 6px;
                padding-top: 10px;
                padding-bottom: 6px;
                .nav-info{
                    display: flex;
                    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:64%;
                        /*text-align: right;*/
                        margin: 0 auto;
                        padding-top: 3px;
                        display: flex;
                        justify-content: flex-end;
                        align-items: center;
                        image{
                            width: 18px;
                            height: 18px;
                        }
                        .custom-input{
                            font-size: 12px;
                            width: 200rpx;
                            /*border: 1px solid red;*/
                        }
                        .head-img {
                            width: 50px;
                            height: 50px;
                            border-radius: 25px;
                            text-align: center;
                            padding-right: 20px;
                            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;
            }
        }
    }

    .button-group {
        display: flex;
        align-items: center;
    }

    .button {
        padding: 6px 12px;
        font-size: 14px;
        background-color: #e6e6e6;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    .custom-input-ranks{
        width: 30px;
        font-size: 12px;
        text-align: center;
    }


    .radio-item{
        padding-right: 6px;
    }
    .picker-change-store{
        font-size: 14px;
        color: #999;
        line-height: 22px;

        display: flex;
        flex-direction: row;
    }
</style>