xpgx-xcx/src/pages/updateUser/index.vue

<template>
    <div class="bg">
        <div class="content">
            <div @click="() => {
                userFormShow = true
            }" class="nickname">
                <div style="display: flex;align-items: center;height: 100%;">
                    <image class="headImg" mode="widthFix" src="/static/icon/user_nickname.png"></image>
                    <div>用户昵称</div>
                </div>
                <div style="display: flex;align-items: center;height: 100%;">
                    <div style="margin-right: 20rpx;">{{ userInfo.nickName }}</div>
                    <image class="arrow" mode="widthFix" src="/static/icon/user_arrow2@2x.png"></image>
                </div>
            </div>

            <div @click="() => {
                userFormShow = true
            }" class="nickname">
                <div style="display: flex;align-items: center;height: 100%;">
                    <image class="headImg" mode="widthFix" src="/static/icon/user_phone.png"></image>
                    <div>手机号</div>
                </div>
                <div style="display: flex;align-items: center;height: 100%;">
                    <div style="margin-right: 20rpx;">{{ userInfo.phone }}</div>
                    <image class="arrow" mode="widthFix" src="/static/icon/user_arrow2@2x.png"></image>
                </div>
            </div>
        </div>
        <van-popup :z-index="9999" :close-on-click-overlay="true" position="bottom" :show="userFormShow">
            <view class="userform">
                <!-- <view></view> -->
                <view class="userform-close">
                    <van-icon @click="() => {
                        userFormShow = false;
                    }
                        " color="#a8a8a8" size="18" name="cross" />
                </view>
                <view>
                    <van-field :value="userInfo.nickName" type="nickname" required clearable label="用户名"
                        @blur="changeUserName" placeholder="请输入用户名" />
                    <van-field :value="userInfo.phone" clearable label="手机号" placeholder="请绑定手机号" @change="changeUserPhone">

                    </van-field>
                </view>
                <view class="userform-bind">
                    <van-button @click="sendUserInfo" custom-style="width:690rpx;" round type="primary">确定</van-button>
                </view>
            </view>
        </van-popup>

    </div>
</template>

<script>
import api from '@/api/index';
export default {
    data() {
        return {
            userInfo: uni.getStorageSync("userInfo"),
            userFormShow: false
        }
    },
    methods: {
        sendUserInfo() {

            if (/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/g.test(this.userInfo.phone)) {
                api.user.userInfoUserInfo(this.userInfo).then(res => {
                    this.userFormShow = false
                    api.user.userInfoGetUserInfo().then(res => {
                        this.userInfo = res.data.data
                        uni.setStorageSync('userInfo', this.userInfo)
                    })

                })
            }
            else {
                uni.showToast({
                    title: '手机格式错误',
                    icon: 'error'
                })
            }

        },
        changeUserName(e) {
            console.log(e);
            const name =e.detail.value||e.detail
            this.userInfo.nickName =name;
        },
        changeUserPhone(e) {
            console.log(e);
            this.userInfo.phone = e.detail;


        },
    },

}
</script>

<style lang="less" scoped>
.bg {
    background-color: #F6ECDB;
    width: 100vw;
    min-height: 100vh;

    .content {
        padding-top: 40rpx;
        padding-left: 30rpx;
        padding-right: 30rpx;

        .nickname {
            padding: 0 30rpx;
            font-size: 30rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 140rpx;
            background-color: #FFFBF5;

            .headImg {
                width: 80rpx;
                margin-right: 20rpx;
            }

            .arrow {
                width: 16rpx;
            }
        }
    }

    .userform {
        width: 100%;
        height: auto;
        background: #fff;

        .userform-close {
            text-align: right;
            padding-right: 15rpx;
            padding-top: 15rpx;
        }

        .userform-bind {
            width: 100%;
            padding: 30rpx 30rpx;
            display: flex;
            justify-content: center;
        }
    }
}
</style>