|
@@ -0,0 +1,298 @@
|
|
|
+<template>
|
|
|
+ <view class="page">
|
|
|
+ <view class="flex-col section_1">
|
|
|
+ <view class="justify-between align-center group" @tap="tapAvatar">
|
|
|
+ <text class="text">头像</text>
|
|
|
+ <view class="flex-row">
|
|
|
+ <image
|
|
|
+ :src="userInfo.avatar ? userInfo.avatar : '/static/temp/pro.png'"
|
|
|
+ class="image_1"
|
|
|
+ />
|
|
|
+ <image
|
|
|
+ src="/static/my_rarrow.png"
|
|
|
+ class="image_2 image_3"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flex-col">
|
|
|
+ <view class="justify-between align-center group" @tap="showNickPanel">
|
|
|
+ <text class="text">昵称</text>
|
|
|
+ <view class="flex-row">
|
|
|
+ <text class="text_4 clamp">昵称昵称</text>
|
|
|
+ <image
|
|
|
+ src="/static/my_rarrow.png"
|
|
|
+ class="image_2 image_3"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flex-col">
|
|
|
+ <view class="justify-between align-center group">
|
|
|
+ <text class="text">姓名</text>
|
|
|
+ <view class="flex-row">
|
|
|
+ <text class="text_4 clamp">姓名姓名姓名</text>
|
|
|
+ <image
|
|
|
+ src="/static/my_rarrow.png"
|
|
|
+ class="image_2 image_3"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flex-col">
|
|
|
+ <view class="justify-between align-center group" @tap='tapSex'>
|
|
|
+ <text class="text">姓别</text>
|
|
|
+ <view class="flex-row">
|
|
|
+ <text class="text_4 clamp">姓别</text>
|
|
|
+ <image
|
|
|
+ src="/static/my_rarrow.png"
|
|
|
+ class="image_2 image_3"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flex-col">
|
|
|
+ <picker mode="date" @change="onDate" :end="curDate" >
|
|
|
+ <view class="justify-between align-center group">
|
|
|
+ <text class="text">生日</text>
|
|
|
+ <view class="flex-row">
|
|
|
+ <text class="text_4 clamp">1998-12-18</text>
|
|
|
+ <image
|
|
|
+ src="/static/my_rarrow.png"
|
|
|
+ class="image_2 image_3"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </picker>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <popup ref="nickRef" :isStopMaskHide="true">
|
|
|
+ <view class="flex-col section_3 nick-panel">
|
|
|
+ <text class="text_14">修改昵称</text>
|
|
|
+ <view class="flex-col group_14">
|
|
|
+ <view class="flex-col">
|
|
|
+ <view class="group_16 align-center">
|
|
|
+ <text class="text_15">原昵称:</text>
|
|
|
+ <text class=" text_16 clamp">{{panelOVal}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="flex-col items-start text-wrapper">
|
|
|
+ <input type="text" class="text_17" placeholder="请输入昵称" v-model="panelVal">
|
|
|
+ <!-- <text class="text_17">支持2-16位中英文、数字</text> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flex-row group_17">
|
|
|
+ <view class="flex-col items-center text-wrapper_1" @tap="cancel"><text class="text_18">取消</text></view>
|
|
|
+ <view class="flex-col items-center text-wrapper_2" @tap="confirm"><text class="text_19">确认更改</text></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </popup>
|
|
|
+ <KXChoose ref="sexRef" @rundata="onSex" />
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import KXChoose from '@/components/kx-choose.vue'
|
|
|
+export default {
|
|
|
+ components:{
|
|
|
+ KXChoose,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ nickname:'',
|
|
|
+ panelType:'', //修改昵称nick,姓名name
|
|
|
+ panelVal:'', //输入值
|
|
|
+ panelOVal:'', //原值
|
|
|
+ curDate:'',
|
|
|
+ sexs:[{name:'男'},{name:'女'}]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.curDate= this.$tools.handleDate(new Date());
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ onDate(e){
|
|
|
+ console.log('onDate--',e.detail.value)
|
|
|
+ },
|
|
|
+ tapSex(){
|
|
|
+ this.$refs.sexRef.open(this.sexs);
|
|
|
+ },
|
|
|
+ onSex({item,items}){
|
|
|
+ console.log('onSex---',item,items)
|
|
|
+ },
|
|
|
+ showNickPanel(){
|
|
|
+ this.$refs.nickRef.show()
|
|
|
+ },
|
|
|
+ hideNickPanel(){
|
|
|
+ this.$refs.nickRef.hide()
|
|
|
+ },
|
|
|
+ cancel(){
|
|
|
+ this.hideNickPanel()
|
|
|
+ },
|
|
|
+ async confirm(){
|
|
|
+ this.cancel();
|
|
|
+ let pRes = await this.$request('user.profile',{nickname:this.nickname})
|
|
|
+ this.$tools.msg(pRes.msg);
|
|
|
+ this.nickname = '';
|
|
|
+ this.$store.dispatch('user/getUserInfo')
|
|
|
+ },
|
|
|
+ async tapAvatar(){
|
|
|
+ let res = await this.$tools.uploadImg();
|
|
|
+ let pRes = await this.$request('user.profile',{avatar:res.fullurl})
|
|
|
+ this.$tools.msg(pRes.msg);
|
|
|
+ this.avatar = res.fullurl;
|
|
|
+ this.$store.dispatch('user/getUserInfo')
|
|
|
+ },
|
|
|
+ tapLink(){
|
|
|
+ if(!this.userInfo.bsnlink){
|
|
|
+ this.$tools.msg('您的地址尚未生成')
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.navTo('/pages/mine/chainAddr')
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+page{
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+.page{
|
|
|
+ padding-top: 10rpx;
|
|
|
+}
|
|
|
+
|
|
|
+// . {
|
|
|
+// text-transform: uppercase;
|
|
|
+// }
|
|
|
+.section_1 {
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ width: 690rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+.group {
|
|
|
+ height: 108rpx;
|
|
|
+ // padding: 30rpx 24rpx 30rpx 31rpx;
|
|
|
+ border-bottom: solid 2rpx #0000000f;
|
|
|
+ .text {
|
|
|
+ margin: 10rpx 0;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang;
|
|
|
+ }
|
|
|
+ .image_1 {
|
|
|
+ width: 70rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ border-radius: 70rpx;
|
|
|
+ }
|
|
|
+ .text_4 {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang;
|
|
|
+ // line-height: 29rpx;
|
|
|
+ letter-spacing: 2.7rpx;
|
|
|
+ max-width: 400rpx;
|
|
|
+ }
|
|
|
+ .image_2 {
|
|
|
+ width: 8rpx;
|
|
|
+ height: 15rpx;
|
|
|
+ }
|
|
|
+ .image_3 {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ align-self: center;
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.section_3 {
|
|
|
+ padding: 30rpx 37rpx 34rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+}
|
|
|
+.text_14 {
|
|
|
+ align-self: center;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-family: PingFang;
|
|
|
+ line-height: 32rpx;
|
|
|
+ letter-spacing: 1.36rpx;
|
|
|
+}
|
|
|
+.group_14 {
|
|
|
+ margin-top: 38rpx;
|
|
|
+}
|
|
|
+.group_17 {
|
|
|
+ margin-top: 41rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+}
|
|
|
+.group_16 {
|
|
|
+ align-self: center;
|
|
|
+ line-height: 27rpx;
|
|
|
+}
|
|
|
+.text-wrapper {
|
|
|
+ margin-top: 30rpx;
|
|
|
+ // padding: 24rpx 0 23rpx;
|
|
|
+ background-color: #f1f1f1;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ width: 500rpx;
|
|
|
+ .text_17 {
|
|
|
+ // margin-left: 37rpx;
|
|
|
+ padding: 0 37rpx;
|
|
|
+ color: #333;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang;
|
|
|
+ letter-spacing: 1.12rpx;
|
|
|
+ height: 74rpx;
|
|
|
+ line-height: 74rpx;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+.text-wrapper_1 {
|
|
|
+ padding: 19rpx 0 18rpx;
|
|
|
+ background-color: #ececec;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ width: 194rpx;
|
|
|
+ height: 64rpx;
|
|
|
+}
|
|
|
+.text-wrapper_2 {
|
|
|
+ margin-left: 72rpx;
|
|
|
+ padding: 19rpx 0 18rpx;
|
|
|
+ background-color: #363636;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ width: 194rpx;
|
|
|
+ height: 64rpx;
|
|
|
+}
|
|
|
+.text_15 {
|
|
|
+ color: #333333;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang;
|
|
|
+ line-height: 27rpx;
|
|
|
+ letter-spacing: 1.12rpx;
|
|
|
+}
|
|
|
+.text_16 {
|
|
|
+ color: #333333;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang;
|
|
|
+ line-height: 27rpx;
|
|
|
+ letter-spacing: 2.52rpx;
|
|
|
+ max-width: 360rpx;
|
|
|
+}
|
|
|
+.text_18 {
|
|
|
+ color: #333333;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang;
|
|
|
+ line-height: 27rpx;
|
|
|
+ letter-spacing: 1.12rpx;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.text_19 {
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang;
|
|
|
+ line-height: 27rpx;
|
|
|
+ letter-spacing: 1.12rpx;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+</style>
|