100 lines
2.6 KiB
Vue
100 lines
2.6 KiB
Vue
<template>
|
||
<view class="page-wrap">
|
||
<view class="page-bg">
|
||
<u-navbar leftIconColor="#FFFFFF" :autoBack="true" bg-color="transparent" safeAreaInsetTop placeholder></u-navbar>
|
||
<view class="notice">
|
||
请如实填写个人资料，真实的资料会更受欢迎
|
||
</view>
|
||
<view class="title">
|
||
你的性别是？
|
||
</view>
|
||
<view class="desc">
|
||
注册后将无法更改，请认真填写
|
||
</view>
|
||
<view class="sex">
|
||
<view :class="{current: sex == 1}" @click="sex = 1" class="sex-item">
|
||
<image class="sex-item-icon" :src="sex == 1 ? 'https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/boy-02.png' : 'https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/boy-01.png'" mode="aspectFill"></image>
|
||
<view class="sex-item-text">
|
||
男
|
||
</view>
|
||
<image src="../../../../static/icon/gou.png" v-if="sex == 1" class="gou"></image>
|
||
</view>
|
||
<view :class="{current: sex == 2}" @click="sex = 2" class="sex-item" style="margin-top: 50rpx;">
|
||
<image class="sex-item-icon" :src="sex == 2 ? 'https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/girl-02.png' : 'https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/girl-01.png'" mode="aspectFill"></image>
|
||
<view class="sex-item-text">
|
||
女
|
||
</view>
|
||
<image src="../../../../static/icon/gou.png" v-if="sex == 2" class="gou"></image>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="btn-wrapper">
|
||
<u-button v-if="sex == null" text="继续" color="#837C8B" shape="circle" ></u-button>
|
||
<u-button v-else text="继续" color="linear-gradient(#95258d, #440a5f);" shape="circle" @click="handleSubmit"></u-button>
|
||
</view>
|
||
<u-safe-bottom></u-safe-bottom>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
sex: null
|
||
};
|
||
},
|
||
methods: {
|
||
handleSubmit() {
|
||
console.log('this.sex: ', this.sex);
|
||
if (this.sex != null) {
|
||
const userBase = uni.getStorageSync('UserBase') || {}
|
||
userBase.sex = this.sex
|
||
uni.setStorageSync("UserBase", userBase)
|
||
this.$push('/sub_pages/user/base/birthday/birthday')
|
||
}else {
|
||
if (!this.avatar) {
|
||
uni.showToast({
|
||
title: '请选择性别',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import "../base.scss";
|
||
|
||
.sex {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
margin-top: 200rpx;
|
||
|
||
&-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
text-align: center;
|
||
opacity: .4;
|
||
|
||
&.current {
|
||
opacity: 1;
|
||
}
|
||
|
||
&-icon {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
border-radius: 50%;
|
||
// background-color: #FFF;
|
||
}
|
||
|
||
&-text {
|
||
font-size: 28rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
</style> |