BRS1.0/pages/individual/index.vue

<template>
  <view class="app-content">
    <view class="header"><view class="log" @tap="clickOrder"></view>{{ navname }}<view class="up">完成</view></view>
    <view class="cont">
      <view class="photograph">
				<!-- <view class="log"  @click="clk(0)"></view> -->
        <!-- <image :src="urls[0]" @click="clk(0)"></image>
        <image :src="urls[1]" @click="clk(1)"></image> -->
        <!-- <button @click="clk(0)">按钮触发</button> -->
        <avatar selWidth="200px" selHeight="400upx" @upload="myUpload" :avatarSrc="url"
        avatarStyle="width: 200upx; height: 200upx; border-radius: 100%;"></avatar>
			</view>
    </view>
    <view class="content">
      <view class="list">
        <p>名称</p>
        <input  class="input"  name="yonghuming"  type="text" value=""  placeholder-style="font-size:.8125rem;color:rgb(197, 197, 197);" placeholder="请输入名称" />
      </view>
      <view class="list">
        <p>工号</p>
        <input  class="input"  name="yonghuming"  type="text" value=""  placeholder-style="font-size:.8125rem;color:rgb(197, 197, 197);" placeholder="请输入工号" />
      </view>
    </view>
    <view class="butele">退出登录</view>
  </view>
</template>
<script>
	import Nav from '../../components/header/nav.vue'
  import avatar from "../../components/yq-avatar/yq-avatar.vue";
	export default {
		data() {
			return {
				navname: '个人信息',
        url: []
			}
		},
		created(option) {
		},
		onLoad(){
		},
		onUnload() {
		},
		onShow() {
		},
		mounted() {
		},
		components: {
			Nav,
      avatar
		},
		methods: {
			clickOrder () {
				uni.switchTab({
					url: "/pages/mypage/index"
				})
			},
      myUpload(rsp) {
        this.$set(this.urls, rsp.index, rsp.path);
      },
      clk(index) {
        this.$refs.avatar.fChooseImg(index,{
            selWidth: "300upx", selHeight: "300upx",
            expWidth: '260upx', expHeight: '260upx'
        });
      },
      myUpload(rsp) {
        this.url = rsp.path; //更新头像方式一
        //rsp.avatar.imgSrc = rsp.path; //更新头像方式二
      }
		},
	}
</script>
<style lang="scss" scoped>
  .app-content{
    >.header{
      width: 100%;
      height: 4.375rem;
      display: flex;
      justify-content: center;
      align-items: center;
      // background: rgba(49,85,99,1);
      color: rgb(16, 17, 22);
      font-family: Noto Sans SC;
      font-size: 1rem;
      position: relative;
      >.log{
        width: .375rem;
        height: .75rem;
        font-size: .75rem;
        position: absolute;
        left: 1.5rem;
        background: url('../../static/ico@1x.png') no-repeat;
        background-size: 100% 100%;
      }
      >.up{
        position: absolute;
        right: 1.5rem;
        color: rgb(37, 121, 160);
        font-family: Noto Sans SC;
        font-size: .875rem;
        font-weight: 500;
      }
    }
    >.cont{
      >.photograph{
        width: 6rem;
        height: 6rem;
        background: rgb(197, 207, 211);
        // background: red;
        border-radius: 50%;
        margin: 0 auto;
        margin-top: .625rem;
        display: flex;
        align-items: center;
        justify-content: center;
        >.log{
          width: 1.75rem;
          height: 1.75rem;
          background: url('../../static/shi.png') no-repeat;
          background-size: 100% 100%;
        }
      }
    }
    >.content{
      margin-left: 1.5rem;
      margin-top: 2.125rem;
      margin-bottom: 3rem;
      >.list{
        height: 3.375rem;
        display: flex;
        align-items: center;
        border-bottom: 1px solid rgb(238, 238, 238);
        >p{
          color: rgb(0, 0, 0);
          font-family: Noto Sans SC;
          font-size: .8125rem;
          font-weight: 500;
          margin-right: 2.1875rem;
        }
      }
    }
    >.butele{
      width: 20.5625rem;
      height: 2.75rem;
      background: linear-gradient(165.96deg, rgba(248.17,101.23,53.02,1) -34%,rgba(231.09,13.66,13.66,1) 166%);
      border-radius: 4px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgb(255, 255, 255);
      font-family: Noto Sans SC;
      font-size: 1rem;
      font-weight: 700;
    }
  }
</style>