ysdH5/pages/setUpForm/form_submit.vue

<template>
    <view>
        <view class="content">
            <!-- 表单 -->
            <form @submit="uploadFile">
                <view class="head_img" @click="upShopLogo" v-if="type == 'avatar'">
                    <view class="upLoad">
                        <image class="upLoadBack" :src="avatar" mode="aspectFill"></image>
                        <image class="upLoadImg" :src="userimg" mode="aspectFill"></image>
                        <view class="upLoadEdit">更换头像</view>
                    </view>
                </view>
                <view class="form" v-if="type == 'username'">
                    <view class="form-input">
                        <label class="form-input-label">昵称</label>
                        <input placeholder="输入昵称" :value="nickname" name="nickname"></input>
                    </view>
                </view>
                <view class="form-btn">
                    <button form-type="submit" :disabled="disabledOk">保存</button>
                </view>
            </form>
        </view>
    </view>
</template>

<script>
    import { index, upload } from '@/apis/interfaces/user'
    export default {
        data() {
            return {
                type        : '',   // 跳转来源 avatar为设置头像  username为修改昵称
                userData    : '',   // 用户信息
                avatar      : '',   // 用户头像
                userimg     : '',   // 用户新上传头像
                nickname    : '设置昵称',   // 用户昵称
                disabledOk  : false // 提交按钮状态
            }
        },
        // 生命周期函数--监听页面加载
        onLoad(options) {
            this.type = options.type
        },
    
        // 生命周期函数--监听页面显示
        onShow() {
            // 获取用户信息
            this.userInfo();
        },
    
        methods: {
            // 用户信息
            userInfo() {
                index().then(res => {
                    this.avatar = res.info.avatar
                    this.nickname = res.info.nickname
                }).catch(err => {});
            },
            
            // 选择相册方式
            upShopLogo(e) {
                uni.showActionSheet({
                    itemList: ['从相册中选择', '拍照'],
                    itemColor: "#f7982a",
                    success: res=> {
                    if (!res.cancel) {
                        if (res.tapIndex == 0) {
                              this.chooseWxImageShop('album');//从相册中选择
                        }else if (res.tapIndex == 1) {
                                 this.chooseWxImageShop('camera');//手机拍照
                            }
                        }
                    }
                })
            },
            
            // 从相册中选择
            chooseWxImageShop (type) {
                uni.chooseImage({
                    sizeType    : ['original', 'compressed'],
                    sourceType  : [type],
                    success: res=> {
                        var tempFilePaths = res.tempFilePaths
                        uni.showLoading({
                            title: '上传中'
                        })
                        uni.uploadFile({
                            url     : 'https://lifetest.ysd-bs.com/api/storage',
                            filePath: tempFilePaths[0],
                            name    : 'file',
                            success : res => {
                                var userData = JSON.parse(res.data)
                                this.userimg = userData.data.showpath
                                uni.hideLoading()
                            }
                        })
                    }
                })
            },
            
            // 表单提交
            uploadFile(e) {
                let newName  = e.detail.value.nickname,
                    newType  = '',
                    newValue = ''
                    
                if (this.type == "avatar") {
                    newType = 'avatar'
                    newValue = this.userimg
                }
                
                if (this.type == "username") {
                    newType = 'nickname'
                    newValue = newName
                }
                
                upload({
                    type: newType,
                    value: newValue
                }).then(res=>{
                    uni.showToast({
                        title: res
                    })
                    setTimeout(()=>{
                        uni.switchTab({
                            url: '/pages/user/index'
                        });
                    },2000)
                    
                    this.disabledOk = true
                }).catch(err => {});
            }
        }
    }
</script>

<style lang="scss" scoped>
    .leftbtn-icon{
    	width: 38rpx;
    	vertical-align: middle;
    	margin-bottom: 4rpx;
    }
    
    /* 表单 */
    .upLoad {
        position: relative;
        width: 200rpx;
        height: 200rpx;
        z-index: 9;
        margin: 50rpx auto 0;
        border-radius: 50%;
        overflow: hidden;
    }
    
    .upLoadBack {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 9;
        left: 0;
        top: 0;
    }
    
    .upLoadImg {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 99;
    }
    
    .upLoadEdit {
        position: absolute;
        width: 100%;
        height: 60rpx;
        left: 0;
        bottom: 0;
        z-index: 10;
        background: rgba(0, 0, 0, .3);
        text-align: center;
        line-height: 60rpx;
        color: #fff;
        font-size: 26rpx;
        opacity: .9;
    }
    /* 提交按钮 */
    
    .form-btn{
        padding: 30rpx 30rpx;
        width: 100%;
        box-sizing: border-box;
    }
    
    .form-btn button{
        background: #000000;
        color: white;
        height: 80rpx;
        line-height: 80rpx;
        font-size: 32rpx;
        padding: 0 !important;
        margin: 40rpx 0 0!important;
        width: 100% !important;
    }
    
    /* 表单 */
    
    .form{
        background: white;
        display: block;
    }
    
    .form-input-label{
        position: absolute;
        left: 30rpx;
        width: 100rpx;
        line-height: 90rpx;
    }
    
    .form-input {
        padding-left: 140rpx;
        padding-right: 30rpx;
        position: relative;
        height: 90rpx;
    }
    
    .form-input input{
        width: 100%;
        height: 90rpx;
        line-height: 90rpx;
    }
</style>