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

<template>
  <view class="main">
    <view class="content">
      <view class="index-view tops" @click="updateImg">
        <view class="user-name">{{ '头像' }}</view>
        <view
          class="user-right rights"
          style="display: flex; align-items: center"
        >
          <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.pkGradeVal }}
        </view>
      </view>
      <view class="index-view">
        <view class="user-name">荣誉奖衔</view>
        <view class="user-right">
          {{ userInfo.pkMaxAwardsVal || userInfo.pkAwardsVal }}
        </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.pkAwardsVal }}
        </view>
      </view>
      <view class="index-view none">
        <view class="user-name">{{ '创建日期' }}</view>
        <view class="user-right">
          {{ userInfo.creationTime }}
        </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
        .getInfo()
        .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;
  display: flex;
  align-items: center;
  justify-content: center;
  image {
    width: 89rpx;
    height: 89rpx;
    border-radius: 50%;
  }
}
.btn {
  background-color: #005bac;
  border: none;
  height: 92rpx;
  line-height: 92rpx;
  font-size: 30rpx;
  margin: 40rpx auto;
  width: 690rpx;
}
</style>