dtx_store/pages/auth/role.vue

<template>
    <view class="role">
		<view class="role-basic-title">共力生态角色创建</view>
        <input class="role-input" type="text" placeholder="输入您的昵称" v-model="nickname"/>
        <view class="gender">
			<view class="gender-item" :class="{'active' : sex === 1}" @click="sex = 1">男生</view>
			<view class="gender-item" :class="{'active' : sex === 2}" @click="sex = 2">女生</view>
        </view>
        <view class="role-figure">
			<view class="role-figure-title">选择您的共力生态角色形象</view>
            <scroll-view class="role-figure-scroll" scroll-x="true" >
                <view
					class="role-figure-item"
					v-for="(item, index) in (sex === 1 ? male: female)"
					:class="storageId === item.storage_id ? 'active': ''"
					:key="index"
					@click="storageId = item.storage_id"
					>
					<image :src="item.cover" mode="widthFix" alt="形象">
				</view>
            </scroll-view>
        </view>
        <view class="role-button">
            <button @click="create" :disabled="disabled">开启我的共力人生</button>
        </view>
    </view>
</template>

<script>
	import {
		userFigure,
		createUser
	} from '@/apis/interfaces/auth.js'
    export default {
        data() {
            return {
                male		: [],
				female		: [],
				nickname	: '',
				sex			: 1,
				storageId	: '',
				disabled	: false
            };
        },
		watch: {
			sex(newVale){
				this.storageId = (this.sex === 1 ? this.male[0].storage_id : this.female[0].storage_id)
			}
		},
		created() {
			userFigure().then(res => {
				this.female    = res.female
				this.male	   = res.male
				this.storageId = res.male[0].storage_id
			}).catch(err => {
				uni.showToast({
					title: err.status_code + ':' +  err.message,
					icon : 'none'
				})
			})
		},
		methods: {
			create(){
				this.disabled = true
				uni.showLoading({
					title: '创建中...'
				})
				createUser({
					nickname	: this.nickname,
					sex			: this.sex,
					storage_id	: this.storageId
				}).then(res => {
					uni.setStorageSync('isnew', 1)
                    if(this.$Route.query.shareId!='' && this.$Route.query.shareId != undefined){
                        setTimeout(() => {
                            uni.hideLoading()
                            plus.runtime.arguments = null;
                            plus.runtime.arguments = '';
                            uni.reLaunch({
                                url: '/pages/group-book/success/success?access=1&id=' + this.$Route.query.shareId
                            })
                        }, 1000)
                    }else{
                        this.$Router.pushTab({name: 'Life'})
                    }
                    uni.setStorageSync('isnew', 1)
				}).catch(err => {
					this.disabled = false
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			}
		},
		onNavigationBarButtonTap() {
			uni.showModal({
				title  		: '提示',
				content		: '取消角色创建并退出登录吗?',
				cancelText  : '继续创建',
				confirmText	: '退出登录',
				success		: e => {
					if(e.confirm){
						this.$store.commit('setToken', '');
						this.$Router.replaceAll({name: 'Auth'});
					}
				}
			})
		}
    }
</script>

<style lang="scss">
    .role{
        padding: 30rpx;
		background: #f8f8f8;
		min-height: 100vh;
		box-sizing: border-box;
		.role-basic-title{
			font-size: 28rpx;
			color: gray;
			padding-bottom: 30rpx;
		}
		.role-input{
			background: white;
			border-radius: 20rpx;
			height: 100rpx;
			font-size: 32rpx;
			padding: 0 30rpx;
		}
		.gender{
			display: flex;
			margin: 0 -15rpx;
			padding: 30rpx 0;
			&-item{
				background: white;
				width: 50%;
				border-radius: 20rpx;
				margin: 0 15rpx;
				padding: 30rpx;
				box-sizing: border-box;
				&.active{
					border: solid 1px $main-color;
					color: $main-color;
					font-weight: bold;
				}
			}
		}
		.role-figure{
			padding-top: 30rpx;
			.role-figure-title{
				color: gray;
				font-size: 28rpx;
			}
			.role-figure-scroll{
				white-space: nowrap;
				padding-top: 30rpx;
				.role-figure-item{
					display: inline-block;
					background: white;
					margin-right: 30rpx;
					border-radius: 20rpx;
					&:last-child{
						margin-right: 0;
					}
					&.active{
						border:solid 1px $main-color;
					}
					image{
						width: 280rpx;
					}
				}
			}
		}
        .role-button{
            padding: 80rpx 0;
            button{
                background: $main-color;
                color: white;
                border-radius: 50rpx;
                height: 100rpx;
                line-height: 100rpx;
                padding: 0;
                font-weight: bold;
                font-size: 34rpx;
                &::after{
                    display: none;
                }
				&[disabled]{
					opacity: .5;
				}
            }
        }
    }
</style>