teambuy-front/pages_order/mine/oldUpdateUser.vue

<template>
    <view class="login">

        <view class="bg1"></view>

        <view class="title">
            定制自己的形象
        </view>

        <view v-if="back" @click="$utils.navigateBack" style="position: absolute;top: 120rpx;left: 20rpx;">
            <uv-icon size="30rpx" color="#000" name="arrow-left"></uv-icon>
        </view>

        <button class="chooseAvatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
            <image :src="form.headImage" mode="aspectFill"></image>
        </button>

        <input type="nickname" placeholder="给自己起一个响亮的名字" class="nickname" id="nickName" v-model="form.nickName" />

        <!-- <view class="sexSelect">
			<view 
			@click="sexClick(item)"
			v-for="(item, index) in sexList"
			:key="index"
			:style="{color : form.sex == item.value ? item.actColor : '#333'}">
				<uv-icon
				size="30rpx"
				:color="form.sex == item.value ? item.actColor : '#333'"
				:name="item.icon"></uv-icon>
				{{ item.value }}
			</view>
		</view> -->

        <!-- <view class="address"
		@click="$refs.datetimePicker.open()">
			您出生于{{ $dayjs(form.yearDate).format("YYYY") }}年
		</view>
		
		<view class="address"
		@click="$refs.picker.open()">
			{{ form.address || '请选择居住地址'}}
		</view> -->

        <uv-datetime-picker ref="datetimePicker" v-model="form.yearDate" mode="year" :minDate="minDate"
            :maxDate="maxDate">
        </uv-datetime-picker>

        <uv-picker ref="picker" :columns="columns" keyName="name" @confirm="confirmAddress"></uv-picker>

        <view class="btn" @click="submit">
            确认
        </view>
    </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
            form: {
                headImage: '',
                nickName: '',
                sex: '男',
                yearDate: this.$dayjs().add(-18, 'y').valueOf(),//默认满18岁
                address: '',
            },
            maxDate: this.$dayjs().valueOf(),
            minDate: this.$dayjs().add(-100, 'y').valueOf(),
            sex: {
                男: {
                    name: 'man',
                    color: '#5baaff',
                },
                女: {
                    name: 'woman',
                    color: '#ff50b3',
                },
            },
            sexList: [
                {
                    value: '男',
                    icon: 'man',
                    actColor: '#5baaff',
                },
                {
                    value: '女',
                    icon: 'woman',
                    actColor: '#ff50b3',
                },
            ],
            columns: [],
            back: '',
        };
    },
    computed: {
        ...mapState(['cityList', 'userInfo']),
    },
    onLoad({ back }) {
        this.back = back
        // this.$nextTick(() => {
        // 	this.form.headImage = this.userInfo.headImage || this.form.headImage
        // 	this.form.nickName = this.userInfo.nickName || this.form.nickName
        // 	this.form.sex = this.userInfo.sex || this.form.sex
        // 	this.form.yearDate = this.userInfo.yearDate || this.form.yearDate
        // 	this.form.address = this.userInfo.address || this.form.address
        // })
    },
    onShow() {
        this.getCityList()
        this.getUserInfo()
    },
    computed: {},
    methods: {
        onChooseAvatar(res) {
            let self = this
            self.$Oss.ossUpload(res.target.avatarUrl)
                .then(url => {
                    self.form.headImage = url
                })
        },
        sexClick(item) {
            this.form.sex = item.value
        },
        confirmAddress(e) {
            this.form.address = e.value[0].name
        },
        // 获取城市
        getCityList() {
            this.$api('getCityList', res => {
                if (res.code == 200) {
                    this.columns = [
                        res.result
                    ]
                }
            })
        },
        getUserInfo() {
            this.$api('getInfo', res => {
                if (res.code == 200) {

                    this.form.headImage = res.result.headImage || this.form.headImage

                    this.form.nickName = res.result.nickName || this.form.nickName

                    this.form.sex = res.result.sex || this.form.sex

                    this.form.yearDate = res.result.yearDate &&
                        this.$dayjs(res.result.yearDate + '-01-01').valueOf() || this.form.yearDate

                    this.form.address = res.result.address || this.form.address
                }
            })
        },
        submit() {
            let self = this

            uni.createSelectorQuery().in(this)
                .select("#nickName")
                .fields({
                    properties: ["value"],
                })
                .exec((res) => {
                    const nickName = res?.[0]?.value
                    self.form.nickName = nickName

                    if (self.$utils.verificationAll(self.form, {
                        headImage: '请选择头像',
                        nickName: '请填写昵称',
                        // address: '请选择居住地址',
                    })) {
                        return
                    }

                    let data = {
                        ...self.form,
                        // yearDate : this.$dayjs(self.form.yearDate).format("YYYY")
                    }

                    self.$api('updateInfo', data, res => {
                        if (res.code == 200) {
                            uni.reLaunch({
                                url: '/pages/index/index'
                            })
                        }
                    })
                })

        },
    }
}
</script>

<style lang="scss" scoped>
.login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #fff;
    overflow: hidden;


    .bg1 {
        width: 700rpx;
        height: 700rpx;
        border-radius: 50%;
        background-color: #ffc0b333;
        position: absolute;
        right: -300rpx;
        top: -300rpx;
    }

    .title {
        line-height: 45rpx;
        font-weight: 900;
        padding-bottom: 100rpx;
        font-size: 40rpx;
    }

    .chooseAvatar {
        width: 100%;
        padding: 0 !important;
        margin: 0 !important;
        border: none;
        background-color: #fff !important;
        width: 220rpx;
        height: 220rpx;
        border-radius: 50%;

        image {
            width: 200rpx;
            height: 200rpx;
            border-radius: 50%;
            box-shadow: 0 0 10rpx 10rpx #00000012;
            margin: 10rpx;
        }
    }

    .chooseAvatar::after {
        border: none;
        padding: 0 !important;
        margin: 0 !important;
    }

    .nickname {
        background-color: #f7f7f7;
        width: 600rpx;
        height: 80rpx;
        text-align: center;
        border-radius: 40rpx;
        margin-top: 30rpx;
    }

    .sexSelect {
        background-color: #f7f7f7;
        width: 600rpx;
        height: 80rpx;
        text-align: center;
        border-radius: 40rpx;
        margin-top: 30rpx;
        display: flex;
        align-items: center;
        font-size: 26rpx;
        line-height: 80rpx;
        overflow: hidden;

        &>view {
            flex: 1;
            display: flex;
            justify-content: center;
            align-content: center;
            height: 100%;
        }

        &>view:nth-child(1) {
            border-right: 1px solid #000;
        }
    }

    .address {
        background-color: #f7f7f7;
        width: 600rpx;
        height: 80rpx;
        text-align: center;
        border-radius: 40rpx;
        margin-top: 30rpx;
        line-height: 80rpx;
        color: #555;
    }

    .btn {
        // background: $uni-linear-gradient-btn-color;
        background: $uni-color;
        color: #fff;
        width: 80%;
        padding: 20rpx 0;
        text-align: center;
        border-radius: 15rpx;
        margin-top: 10vh;
    }
}
</style>