init

pages/auth/role.vue

@@ -0,0 +1,183 @@
+<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 figure"
+					: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 {
+                figure		: [],
+				nickname	: '',
+				sex			: 1,
+				storageId	: '',
+				disabled	: false
+            };
+        },
+		watch: {
+			sex(newVale){
+				this.storageId = this.figure[0].storage_id
+			}
+		},
+		created() {
+			userFigure().then(res => {
+				this.figure    = res
+				this.storageId = res[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 => {
+					this.$store.commit('setIsNew', 1)
+					this.$Router.pushTab({name: 'Life'})
+				}).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.$store.commit('setIsNew', 0);
+						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 #fdbc01;
+					color: #fdbc01;
+					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 #fdbc01;
+					}
+					image{
+						width: 280rpx;
+					}
+				}
+			}
+		}
+        .role-button{
+            padding: 80rpx 0;
+            button{
+                background: #fdbc01;
+                color: white;
+                border-radius: 50rpx;
+                height: 100rpx;
+                line-height: 100rpx;
+                padding: 0;
+                font-weight: bold;
+                font-size: 34rpx;
+                &::after{
+                    display: none;
+                }
+				&[disabled]{
+					opacity: .5;
+				}
+            }
+        }
+    }
+    // .role-button
+</style>