FenXiNspUniapp/packDetail/pages/userzl/index.vue

<template>
 <view>
		<view class="headerImg">
			<image :src="baseUrl + '/applet/common/static/' + constant.headimgUrl" class="images"></image>
			<view class="ghtx" @click="uploadimg()">
				<image src="../../static/xj.png" mode=""></image>
			</view>
		</view>
		<view class="xinxi">
			<view class="name">
				<view class="xms">昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称:</view>
				<input class="iptnr" placeholder="请输入姓名" v-model="constant.nickName" />
			</view>
			<view class="name1">
				<view class="xms">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:</view>
				<view class="sexs">
					<view class="sex">
						<radio-group @change="radioChange" class="group">
							<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
								<view>
									<radio style="transform:scale(0.7)" :value="item.value" :checked="item.value === constant.sex" />
								</view>
								<view class="sexname">{{item.name}}</view>
							</label>
						</radio-group>
					</view>
				</view>
			</view>
				<button class="btn" :disabled="istrue" @click="submit()">保存</button>
		</view>
	</view>
</template>

<script>
	import api from '@/api/api'
	import configService from '@/common/service/config.service.js';
  export default {
    data() {
      return {
		contentheight:0,
		baseUrl:configService.apiUrl,
		uploadUrl:'/applet/common/upload',
		constant:{
			headimgUrl:'',
			nickName:'',
			sex:'',
			id:''
		},
		current:0,
		items:[{
			value:"1",
			name:'男'
		},
		{
			value:"2",
			name:'女'
		}],
		istrue:false
	  }
    },
    onLoad() {
		uni.getSystemInfo({
			success: res => {
				var pxToRpxScale  = 750 / res.windowWidth
				var ktxStatusHeight = res.statusBarHeight * pxToRpxScale
				var navigationHeight = 44 * pxToRpxScale
				this.height = res.windowHeight  * pxToRpxScale//将px 转换rpx		
				this.contentheight = this.height - ktxStatusHeight - navigationHeight - 150
				console.log(this.contentheight,123132)
			}
		});
    },
	onShow() {
		this.getuserInfo()
	},
    methods: {
		getuserInfo(){
			this.$http.get('/applet/userInfo').then(res=>{
				this.constant = res.data.data
			})
		},
	  uploadimg(){
		  var that = this
		  uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
		  	success: (res) => {
				var tempFilePaths = res.tempFilePaths
				for(var i=0;i<tempFilePaths.length;i++){
					that.$http.upload(that.baseUrl+that.uploadUrl,{
						filePath: res.tempFilePaths[i],
						name: 'file',
						formData:{
							file:res.tempFilePaths[i],
							biz:'busi'
						}
					}).then(res =>{
						if(res.data.code == 0){
							this.constant.headimgUrl = res.data.data.savePath
						}
					})
				}
		  	}
		  });
	  },
	  radioChange(value){
		  console.log(value)
		  this.constant.sex = value.detail.value
	  },
      submit() {
		  const data = {
			  nickName:this.constant.nickName,
			  sex:this.constant.sex,
			  headimgUrl:this.constant.headimgUrl,
			  id:this.constant.id
		  }
		  this.istrue = true
          this.$http.put('/applet/userInfo',data).then(response => {
				if(response.data.code == 0){
					uni.showToast({ title: "修改成功", icon: 'success' })
					uni.navigateBack({
						delta:1
					})
				}
          })
      },
    }
  }
</script>

<style lang="scss">
	page{
		background-color: white;
		height: 100%;
	}
  .uni-nav-bar {
  	  background-color: transparent;
  	  border-color: transparent;
  	  height: 44px;
  	}
  	.uni-nav-bar-text {
  	  font-size: 31rpx;
  	  font-family: Source Han Sans SC;
  	  font-weight: bold;
  	  color: #193772;
  	}
  	.uni-nav-bar__left,
  	.uni-nav-bar__right {
  	  color: #000;
  	}
  	.uni-navbar__content {
  	    border: 0 none !important;
  	}
	.bg-img{
		  width: 100%;
		  height: 100%;
		  position: fixed;
		  top: 0;
		  left: 0;
		  z-index: -1;
	}
	.contents{
		margin-top: 150rpx;
		background: #FFFFFF;
		border-radius: 36rpx 36rpx 0rpx 0rpx;
		width: 100%;
		position: relative;
	}
	.ghtx{
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		top: 104rpx;
		left: 113rpx;
		z-index: 99;
	}
	.ghtx image{
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	}
	.headerImg{
		width: 160rpx;
		height: 160rpx;
		display: flex;
		justify-content: center;
		position: relative;
		margin: 0 auto;
		margin-top: 86rpx;
	}
	.images{
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		margin-bottom: 48rpx;
	}
	.xinxi{
		padding: 0 32rpx;
		font-size: 32rpx;
		font-family: Source Han Sans SC;
		font-weight: 500;
		color: #303B4F;
	}
	.iptnr{
		height: 80rpx;
		margin-top: 26rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
		color: #303B4F;
		border-bottom: 2rpx solid #ececec;
	}
	.name1{
		margin-top: 39rpx;
		border-bottom: 2rpx solid #ececec;
		padding-bottom: 36rpx;
	}
	.radio{
		margin-top: 18rpx;
		display: flex;
	}
	.uni-list-cell{
		display: flex;
	}
	.sexs{
		display: flex;
		margin-top: 18rpx;
	}
	.sex{
		height: 44rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
		color: #303B4F;
	}
	.sex:first-child{
		margin-right: 41rpx;
	}
	.nanv{
		width: 33rpx;
		height: 33rpx;
		margin-right: 14rpx;
	}
	.labels{
		margin-right: 12rpx;
	}
	.checked{
		width: 41rpx;
		height: 41rpx;
		background: #EEF3F5;
		border-radius: 50%;
	}
	.checked image{
		width: 41rpx;
		height: 41rpx;
		background: #EEF3F5;
		border-radius: 50%;
	}
	.btn{
		margin-top: 120rpx;
		height: 88rpx;
		background: #0f6efe;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-family: Source Han Sans SC;
		font-weight: 500;
		color: #FFFFFF;
	}
	.group{
		display: flex;
		margin-top: 26rpx;
	}
	.sexname{
		margin-left: 14rpx;
	}
	.uni-list-cell{
		margin-left: 144rpx;
	}
	.uni-list-cell:first-child{
		margin-left: 0;
	}
	.xms{
		font-weight: bold;
	}
</style>