jje_spread_uniapp/pages/userInfo/userInfo.vue

<template>
	<view class="page">
		<!-- #ifdef H5-->
		<uni-nav-bar  v-if="!$isWxBrowser()" :fixed="true" background-color="#FFE05C" :border="false" :statusBar="false"  left-icon="left" title="个人信息" @clickLeft="back" />
		<!-- #endif -->
		<view class="outView">
			<form @submit="inputValue">
				<view class="flex-row justify-between bordBot" >
					<view class="key flex-col justify-center ">
						<text>头像</text>
					</view>
					<view class="photoView" @click="updateAvatar">
						<image class="photoImage" :src="userInfo.imgUrl || '/static/ud4.png'"></image>
					</view>
				</view>

				<view class="flex-row justify-between bordBot" >
					<view class="key flex-col justify-center ">
						<text>姓名</text>
					</view>
					<view class="nikeName flex-col justify-center">
						<input  disabled name="name" v-model="userInfo.name"   placeholder="请输入昵称"/>
					</view>
				</view>

<!--				<view class="flex-row justify-between bordBot" >-->
<!--					<view class="key flex-col justify-center ">-->
<!--						<text>性别</text>-->
<!--					</view>-->
<!--					<view class="nikeName flex-row justify-center" @click="showSex = true">-->
<!--						<input  name="sex" disabled v-model="userInfo.sex"   placeholder="请选择性别"/>-->
<!--						<u-icon name="arrow-right" color="#666" size="18"></u-icon>-->
<!--					</view>-->
<!--				</view>-->

				<view class="flex-row justify-between bordBot" >
					<view class="key flex-col justify-center ">
						<text>手机号</text>
					</view>
					<view class="nikeName flex-row justify-center">
						<input   name="phone" disabled v-model="userInfo.phone"/>
					</view>
				</view>
				<view class="flex-row justify-between bordBot" >
        <view class="key flex-col justify-center ">
          <text>找回密码</text>
        </view>
        <view class="flex-row justify-end nikeName " @click="updatePassword">
          <text>点击修改</text>
          <u-icon name="arrow-right" color="#666" size="18"></u-icon>
        </view>
      </view>
        <view class="flex-row justify-between bordBot" >
          <view class="key flex-col justify-center ">
            <text>银行卡号</text>
          </view>
          <view v-if="userInfo.bankCard" class="nikeName flex-row justify-center">
            <input   name="phone" disabled v-model="userInfo.bankCard"/>
          </view>
          <view v-else class="flex-row justify-end nikeName " @click="updateCardNumber">
            <text>去填写</text>
            <u-icon name="arrow-right" color="#666" size="18"></u-icon>
          </view>
        </view>
        <view class="flex-row justify-between bordBot" >
          <view class="key flex-col justify-center ">
            <text>开户行</text>
          </view>
          <view v-if="userInfo.openingBank" class="nikeName flex-row justify-center">
            <input   name="phone" disabled v-model="userInfo.openingBank"/>
          </view>
          <view v-else class="flex-row justify-end nikeName " @click="updateCardNumber">
            <text>去填写</text>
            <u-icon name="arrow-right" color="#666" size="18"></u-icon>
          </view>
        </view>

<!--				<button class="updateButton"  formType="submit">-->
<!--					<text>保存</text>-->
<!--				</button>-->

			</form>
		</view>

		<view  class="logoutButton">
			<u-button type="error" text="退出登录" @click="logout"></u-button>
		</view>
		<!--#ifdef H5-->
		<liu-drag-button v-if="$isWxBrowser()" @clickBtn="back">返回</liu-drag-button>
		<!--#endif-->
		<u-action-sheet
				:show="showSex"
				:actions="actions"
				title="请选择性别"
				@close="showSex = false"
				@select="sexSelect">
		</u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showSex:false,
				photoUrl:'',
				userInfo: {},
				genderIndex:0,
        bankCardNumber:'',
				actions: [{
					name: '男',
					value:'1'
				},
					{
						name: '女',
						value:'0'
					},{
						name: '保密',
						value:'2'
					}
				],
			};
		},
		mounted() {
		},
		onShow() {
			// 用户信息
			this.userInfo = uni.getStorageSync('spreadUserInfo')
			console.log(this.userInfo)
		},
		methods: {

			inputValue(e){
				console.log('+++++++++++++inputValue+++++++++++',e)
				this.userInfo.name = e.detail.value.name
			},
      updateCardNumber(){
        uni.navigateTo({
          url:'/pages/updateBankCardData/index'
        })
      },
			updateAvatar(){
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
						let tempUrl = res.tempFiles[0].path
						uni.uploadFile({
							url: that.$baseUrl + '/resource/oss/upload', //仅为示例，非真实的接口地址
							filePath:tempUrl,
							name: 'file',
							header: {
								// "Content-Type": "multipart/form-data",
								// 'X-Access-Token': uni.getStorageSync('token'),
								'Authorization': 'Bearer ' + uni.getStorageSync('accessToken'),
							},
							success: (uploadFileRes) => {
								let res = JSON.parse(uploadFileRes.data)
								console.log('+++++++++++++++++chooseavatar+++++++++++++++++++++++',uploadFileRes.data)
								that.userInfo.imgUrl = res.data.url.replace(/^http:/, "https:")
								that.userInfo.img = res.data.ossId

								that.$api.user.updateUserInfo({
									img:res.data.ossId
								}).then(res1=>{
									console.log(res1)
								})

								uni.setStorageSync('spreadUserInfo', that.userInfo)

							}
						});

					}
				})

			},

			sexSelect(e) {
				this.userInfo.sex = e.name
				console.log(e)
			},
			back() {
				let pages = getCurrentPages()
				if (pages.length > 1){
					uni.navigateBack({
						delta: 1,
						fail:err=>{
							console.log(err)
						}
					})
				}else {
					uni.switchTab({
						url: '/pages/my/my'
					});
				}
			},

			updatePassword(){

				uni.navigateTo({
					url:'/pages/forgetPassword/forgetPassword'
				})

			},

			logout(){
				this.$api.login.logout().then(res=>{
					uni.removeStorageSync('accessToken');
					uni.removeStorageSync('spreadUserInfo');

					uni.setStorageSync('isLogOut', true)
					uni.reLaunch({
						url:'/pages/login/login'
					})
				})
			}

		}
	};
</script>

<style lang="scss" scoped>
	@import './index.rpx.css';
</style>