web-base-h5/pages/userData/index.vue

<!--
 * @Descripttion: 
 * @version: 
 * @Author: 王三华
 * @Date: 2023-05-18 14:42:53
-->
<template>
  <view class="main">
	  <view class="content">
		  <view class="index-view tops" @click="updateImg">
			  <view class="user-name">{{'头像'}}</view>
			   <view class="user-right rights">
					<view class="avatar">
						<image :src="userInfo.headPath"/>
					</view>
					<view class="right-icon">
						<image src="../../static/images/right.png"/>
					</view>
			   </view>
		  </view>
		  <view class="index-view">
				  <view class="user-name">{{'昵称'}}</view>
				   <view class="user-right rights" @click="downShow=true">
            <!-- {{ userInfo.nickName1 }} -->
						<!-- <view >
							 <u-input class="border-s"  :maxlength="40" v-model="userInfo.nickName" />
						</view> -->
            <view class="nana">{{ userInfo.nickName }}</view>
						<view class="right-icon">
							<image src="../../static/images/right.png"/>
						</view>
				   </view>
		  </view>
	  </view>
	  <view class="content">
				<view class="index-view tops">
					<view class="user-name">{{'真实姓名'}}</view>
						<view class="user-right">
							{{userInfo.memberName}}
						</view>
				</view>
				<view class="index-view">
						<view class="user-name">{{'会员编号'}}</view>
							<view class="user-right">
								{{userInfo.memberCode}}
							</view>
				</view>
			  <view class="index-view">
				  <view class="user-name">
            {{'联系方式'}}</view>
				   <view class="user-right">
							{{userInfo.phone}}
				   </view>
			  </view>
			  <view class="index-view">
				  <view class="user-name">{{'证件号码'}}</view>
				   <view class="user-right">
							{{userInfo.idCardAuth}}
				   </view>
			  </view>
	  </view>
	  <view class="content" style="border-bottom: none;">
				<!-- <view class="index-view tops">
					<view class="user-name">{{'自然国家'}}</view>
						<view class="user-right">
							{{userInfo.countryName}}
						</view>
				</view>
				<view class="index-view">
						<view class="user-name">{{'结算国家'}}</view>
							<view class="user-right">
								{{userInfo.settleCountryName}}
							</view>
				</view> -->
			  <view class="index-view">
				  <view class="user-name">{{'注册等级'}}</view>
				   <view class="user-right">
							{{userInfo.registerGradeVal}}
				   </view>
			  </view>
			  <view class="index-view">
				  <view class="user-name">{{'结算等级'}}</view>
				   <view class="user-right">
							{{userInfo.settleGradeVal}}
				   </view>
			  </view>
			  <!-- <view class="index-view">
					  <view class="user-name">{{'代理等级'}}</view>
					   <view class="user-right">
								{{userInfo.agentGrade}}
					   </view>
			  </view> -->
			  <view class="index-view">
					<view class="user-name">{{'真实奖衔'}}</view>
						<view class="user-right">
							{{userInfo.awardsVal}}
						</view>
			  	</view>
			  <view class="index-view">
					  <view class="user-name">荣誉奖衔</view>
					   <view class="user-right">
								{{userInfo.maxAwardsVal}}
					   </view>
			  </view>
			  <view class="index-view none">
					  <view class="user-name">{{'创建日期'}}</view>
					   <view class="user-right">
								{{userInfo.payTime}}
					   </view>
			  </view>
			  <view class="index-view none">
				  <view class="user-name">{{'注册业绩'}}</view>
				   <view class="user-right">
							{{userInfo.consumeAchieve|toThousandthAndKeepDecimal}}
				   </view>
			  </view>
				  <view class="index-view none">
				  <view class="user-name">{{'会员权益'}}</view>
				   <view class="user-right">
							{{userInfo.registerAuthorityVal}}
				   </view>
			</view>
			  <view class="index-view none">
				  <view class="user-name">{{'支付时间'}}</view>
				   <view class="user-right">
							{{userInfo.payTime}}
				   </view>
			  </view>
			  <view class="index-view none" v-if="userInfo.pkCountry == 1&&userData.expireDate">
				  <view class="user-name">有效期</view>
				   <view class="user-right">
							{{userData.expireDate}}
				   </view>
			  </view>
			  <view class="index-view none" v-if="userInfo.serviceCode">
				  <view class="user-name">{{'服务编号'}}</view>
				   <view class="user-right">
							{{userData.serviceCode}}
				   </view>
			  </view>
	  </view>
	  <!-- <u-button type="success"
	            shape="circle"
	            class="btn"
				@click="submit"
	        >{{'保存'}}</u-button>
			<view style="height: 20rpx;"></view> -->
      <u-popup 
				:show="downShow"
				mode="bottom"
				closeOnClickOverlay
				closeable
				round="10"
				@close="close"
			>
				<view class="title">修改昵称</view>
				<view class="kung">
					<u--input
						:maxlength="40"
						placeholder="请输入昵称"
						v-model="userInfo.nickName"
					>
					</u--input>
				</view>
				<u-button :disabled="!userInfo.nickName" class="btn" @click="submit" type="error" text="确 定"></u-button>
    </u-popup>
  </view>
</template>

<script>
import * as api from '@/config/login.js'
import { getToken, removeToken } from '@/config/auth.js'
import { setToken } from '@/config/auth.js'
import store from '@/store'
export default {
  data() {
    return {
      downShow:false,
		userInfo:{},
    userData:'',
		urls:'/member/api/maker-space/update-file',
    }
  },
  onLoad() {
	 this.getInfo()
   this.userData = uni.getStorageSync('User')
  },
  methods: {
    close() {
      this.downShow = false
    },
	  		updateImg() {
				const http = uni.$u.http.config.baseURL
				let token = getToken();
	  			uni.chooseImage({
	  				sourceType: ['album'], //从相册选择
	  				success: chooseImageRes => {
	  					const tempFilePaths = chooseImageRes.tempFilePaths;
	  					uni.uploadFile({
	  						url: http+'/member/api/member/update-head', //仅为示例，非真实的接口地址
	  						filePath: tempFilePaths[0],
	  						name: 'file',
	  						header: {
	  							Authorization:token
	  						},
	  						success: res => {
								console.error(res)
	  							// 成功：获取到头像
	  							if (res.statusCode == 200) {
									let data = JSON.parse(res.data)
	  								this.userInfo.headPath = data.data.url
	  							}
	  						}
	  					});
	  				},
	  				fail: err => {
	  					uni.$u.toast('上传失败', 'none');
	  				}
	  			});
	  		},
	  submit() {
			api.updateData({
				nickName: this.userInfo.nickName,
			}).then((res)=>{
				uni.showToast({
					title: res.msg,
					icon:	 'none',
					duration: 1500,
				})
				this.getInfo()
				this.close()
			}) 
	  },
	  // upload() {
		 //  let that = this
			// 	uni.chooseImage({
			// 		count: 1, //默认9
			// 		sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			// 		sourceType: ['album'], //从相册选择
			// 		success: function (res) {
			// 			  let FormDatas = new FormData();
				
			// 			  FormDatas.append("file", res.tempFilePaths[0]);
			// 				api.updateFile(FormDatas).then((res)=>{
			// 					console.error(res)
			// 				})
			// 		}
			// 	});
	  // },
	  getInfo(){
		 api.getData().then(res => {
		        if (res) {
		         this.userInfo = res.data
             if(this.userInfo.nickName.length > 20){
              this.userInfo.nickName1 = this.userInfo.nickName.substring(0,20)+'...'
            }
		        }
		      }).catch(error => {
		        reject(error)
		      })  
		  // api.getInfo().then(res => {
				//  if (res) {
				//   this.userInfo = res.data
				//  }
			 //   }).catch(error => {
				//  reject(error)
			 //   }) 
			 //   console.error(this.userInfo)
	  },
  },
}
</script>

<style lang="scss" scoped>
.kung{
  padding: 20rpx 20rpx
}
.title {
  font-size: 40rpx;
  text-align: center;
  margin: 20rpx auto;
  color: #333;
  font-weight: bold;
}
	.border-s{
		border: none;
		position: absolute;
		right: 0;
		width: 120rpx;
		height: 85rpx;
		margin-right: 20rpx;
	}
	page{
		background-color: #F2F2F2;
	}
	.none{
		border-bottom: none;
	}
	.tops{
		border-top: 1rpx solid #eee;
	}
	.content{
		border-bottom: 20rpx solid #F2F2F2;
		background-color: #fff;
		
	}
	.index-view{
		height: 110rpx;
		margin: 0 30rpx 0 30rpx;
		padding: 0 10rpx;
		line-height: 110rpx;
		border-bottom: 1rpx solid #EEEEEE;
		display: flex;
		justify-content: space-between;
		position: relative;
		color: #333;
	}
	.user-right{
		color: #999;
		font-size: 28rpx;
		display: flex;
    align-items: center;
	}
	.rights{
		margin-right: 45rpx;
	}
  .nana{
    flex: 1;
  }
	.right-icon{
		position: absolute;
		top:12rpx;
		right: 0;
		image{
			width: 40rpx;
			height:40rpx;
		}
	}
	.avatar{
		margin-top: 10rpx;
		image{
			width: 89rpx;
			height: 89rpx;
			border-radius: 50%;
		}
	}
	.btn{
		background-color: #FB3024;
		border: none;
		height: 92rpx;
		line-height: 92rpx;
		font-size:30rpx;
		margin: 40rpx auto;
		width: 690rpx;
	}
</style>