lcoco/pages/my/editInformation.vue

<template>
  <view class="information-box" :style="{'background-image': 'url('+headPortrait+')'}">
    <en-nav :title="title" bgckground-box="rgba(0, 0, 0, 0.6)" :right-show="true" :right-type="2" @navHeight="setNavHeight">
      <template v-slot:right>
        <text class="nav-right sys-weight-600 sys-color-white">预览</text>
      </template>
    </en-nav>
    <scroll-view class="information-data" :scroll-y="true" :style="{'height':'calc(100% - '+navHeight+'px)'}">
      <view class="information-top">
        <view class="top-head">
            <view class="head-box">
               <image class="head-img" src="/static/img/temporary/4.png" mode="aspectFill"></image>
            </view>
        </view>
        <view class="information-proportion">
          <view class="proportion-text sys-color-white sys-weight-400">资料已完善20%</view>
        </view>
        <view class="information-text sys-color-white sys-weight-400">
          资料完整度越高，匹配率越高，社交能力越强哦
        </view>
      </view>
      <view class="edit-data ">
        <view class="photograph-data">
          <view class="photograph-title">
            <view class="title-data">
              <text class="title-text sys-height-44 sys-color-black sys-weight-600">个人照片</text>
              <text class="num-text sys-height-44 sys-color-gray-9">（1/9)</text>
            </view>
            <view class="proportion-data sys-height-44 sys-color-gray-9">
              +20%
            </view>
          </view>
          <view class="photograph-list">
            <view class="photograph-item" v-for="i in 1">
              <image class="photograph-img" src="/static/img/temporary/4.png" mode="aspectFill"></image>
            </view>
            <view class="photograph-add">
              <text class="iconfont"> &#xe627;</text>
            </view>
          </view>
          <view class="photograph-describe sys-weight-600">完成头像认证，收获更多曝光与喜欢</view>
        </view>
        <view class="edit-item">
          <view class="item-title">
            <view class="item-title-text sys-weight-600 sys-color-black sys-height-44">关于我</view>
            <view class="item-title-proportion sys-weight-600 sys-color-black sys-height-44">+10%</view>
          </view>
          <view class="item-data">
            <view class="row-text sys-height-44 sys-color-gray-9">来写个性宣言，完成你的社交第一步</view>
            <view class="row-icon">
              <text class="iconfont sys-height-44 sys-color-gray-9"> &#xe62b;</text>
            </view>
          </view>
        </view>
        <view class="edit-item">
          <view class="item-title">
            <view class="item-title-text sys-weight-600 sys-color-black sys-height-44">交友目的</view>
            <view class="item-title-proportion sys-weight-600 sys-color-black sys-height-44">+10%</view>
          </view>
          <view class="item-data">
            <view class="row-text sys-height-44 sys-color-gray-9">认识朋友</view>
            <view class="row-icon">
              <text class="iconfont sys-height-44 sys-color-gray-9"> &#xe62b;</text>
            </view>
          </view>
        </view>
        <view class="edit-item" >
          <view class="item-title">
            <view class="item-title-text sys-weight-600 sys-color-black sys-height-44">添加微信</view>
            <view class="item-title-proportion sys-weight-600 sys-color-black sys-height-44">+10%</view>
          </view>
          <view class="item-data" @click="goToUrl(4)">
            <view class="row-text sys-height-44 sys-color-gray-9">上传微信，赚取奖励</view>
            <view class="row-icon">
              <text class="iconfont sys-height-44 sys-color-gray-9"> &#xe62b;</text>
            </view>
          </view>
        </view>
        <view class="edit-item">
          <view class="item-title">
            <view class="item-title-text sys-weight-600 sys-color-black sys-height-44">兴趣</view>
            <view class="item-title-proportion sys-weight-600 sys-color-black sys-height-44">+10%</view>
          </view>
          <view class="item-interest" @click="showPopup">
            <view class="interest-item" v-for="i in 2">
              <image class="interest-img" src="/static/img/temporary/4.png" mode="aspectFill"></image>
              <view class="interest-text sys-height-44">游泳</view>
            </view>
            <view class="interest-add" >
              <view class="interest-add-icon">  <text class="iconfont"> &#xe627;</text></view>
              <view class="interest-text sys-height-44">添加</view>
            </view>
          </view>
        </view>
        <view class="edit-item">
          <view class="item-title">
            <view class="item-title-text sys-weight-600 sys-color-black sys-height-44">基础信息</view>
            <view class="item-title-proportion sys-weight-600 sys-color-black sys-height-44">+30%</view>
          </view>
          <view class="item-from">
           <view class="from-item" @click="goToUrl(1)">
              <view class="from-item-title sys-height-44 sys-weight-400">昵称</view>
              <view class="from-item-data">
                <view class="item-data-text  sys-height-44 sys-color-gray-9 sys-weight-400">江湖救急</view>
                <view class="item-data-icon">
                  <text class="iconfont  sys-color-gray-9 sys-weight-400"> &#xe62b;</text>
                </view>
              </view>
           </view>

            <view class="from-item" @click="goToUrl(2)">
              <view class="from-item-title sys-height-44 sys-weight-400" >出生日期</view>
              <view class="from-item-data">
                <view class="item-data-text  sys-height-44 sys-color-gray-9 sys-weight-400">江湖救急</view>
                <view class="item-data-icon">
                  <text class="iconfont  sys-color-gray-9 sys-weight-400"> &#xe62b;</text>
                </view>
              </view>
            </view>
            <view class="from-item" @click="goToUrl(2)">
              <view class="from-item-title sys-height-44 sys-weight-400" >年龄</view>
              <view class="from-item-data">
                <view class="item-data-text  sys-height-44 sys-color-gray-9 sys-weight-400">江湖救急</view>
                <view class="item-data-icon">
                  <text class="iconfont  sys-color-gray-9 sys-weight-400"> &#xe62b;</text>
                </view>
              </view>
            </view>
            <view class="from-item" @click="goToUrl(2)">
              <view class="from-item-title sys-height-44 sys-weight-400" >星座</view>
              <view class="from-item-data">
                <view class="item-data-text  sys-height-44 sys-color-gray-9 sys-weight-400">江湖救急</view>
                <view class="item-data-icon">
                  <text class="iconfont  sys-color-gray-9 sys-weight-400"> &#xe62b;</text>
                </view>
              </view>
            </view>
            <view class="from-item" @click="goToUrl(3)">
              <view class="from-item-title sys-height-44 sys-weight-400">学校</view>
              <view class="from-item-data">
                <view class="item-data-text  sys-height-44 sys-color-gray-9 sys-weight-400">江湖救急</view>
                <view class="item-data-icon">
                  <text class="iconfont  sys-color-gray-9 sys-weight-400"> &#xe62b;</text>
                </view>
              </view>
            </view>
            <view class="from-item" @click="showSelect(1)">
              <view class="from-item-title sys-height-44 sys-weight-400">家乡</view>
              <view class="from-item-data">
                <view class="item-data-text  sys-height-44 sys-color-gray-9 sys-weight-400">江湖救急</view>
                <view class="item-data-icon">
                  <text class="iconfont  sys-color-gray-9 sys-weight-400"> &#xe62b;</text>
                </view>
              </view>
            </view>
            <view class="from-item" @click="showSelect(2)">
              <view class="from-item-title sys-height-44 sys-weight-400">职业</view>
              <view class="from-item-data">
                <view class="item-data-text  sys-height-44 sys-color-gray-9 sys-weight-400">江湖救急</view>
                <view class="item-data-icon">
                  <text class="iconfont  sys-color-gray-9 sys-weight-400"> &#xe62b;</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="edit-but sys-background-black sys-weight-600 sys-color-white">保存</view>
      </view>
      <en-picker v-show="selectShow" ref="selectPicker" :local-data="selectData" :label="selectTitle" @change="setSelectData"></en-picker>
      <en-popup ref="popupObj">
        <template v-slot:popupInfo>
          <view class="popup-box">
            <view class="popup-title">
              <view class="title-left">
                <view class="left-wire"></view>
                <view class="left-text sys-color-black-3 sys-weight-600">选择兴趣</view>
              </view>
              <view class="title-right sys-color-black sys-weight-600" @click="closedPopup">保存</view>

            </view>
            <view class="popup-data">
              <view class="popup-interest-item sys-weight-400" :class="{'pitch-item':i%3===0}" v-for="i in 10">
                兴趣{{i}}
              </view>
            </view>
          </view>


        </template>
      </en-popup>
    </scroll-view>

  </view>
</template>

<script>
import EnNav from "@/components/en-utils/en-nav/en-nav";
import EnSelect from "@/components/en-from/en-select/en-select";
import EnPicker from "@/components/en-utils/en-popup/en-picker";
import EnPopup from "@/components/en-utils/en-popup/en-popup";
export default {
  components: {EnPopup, EnPicker, EnSelect, EnNav},
  data() {
    return {
      title:'编辑资料',
      headPortrait:'/static/img/temporary/3.png',
      navHeight:0,
      selectData:[{'text':'媒体/公关','value':'1'},{'text':'健康/美容','value':'2'},{'text':'IT/互联网','value':'3'}],
      selectTitle:'职业',
      selectShow:false,
      selectType:1,
    }
  },
  methods: {
    setNavHeight(navHeight){
      this.navHeight=navHeight
    },
    setSelectData(value){
      console.log('value',value)
      this.$refs.selectPicker.setPopupClosed()
    },
    showSelect(type){
      this.selectType=type
      if(type===1){
        this.selectTitle='家乡'
      }else if(type===2){
        this.selectTitle='职业'
      }
      this.$refs.selectPicker.showPickerObj()
    },
    showPopup(){
      this.$refs.popupObj.open()
    },
    closedPopup(){
      this.$refs.popupObj.close()
    },
    goToUrl(type){
      if(type===1){
        uni.navigateTo({
          'url':'./edit/nickname'
        })
      }else if(type===2){
        uni.navigateTo({
          'url':'./edit/age'
        })
      }else if(type===3){
        uni.navigateTo({
          'url':'./edit/school'
        })
      }else if(type===4){
        uni.navigateTo({
          'url':'./edit/we-chat'
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">

.information-box{
  background-repeat: no-repeat;//不平铺
  background-position: top center;//居中
  background-size: contain;//随容器大小
  width: 100vw;
  height: 100vh;
  .nav-right{
    font-size: 32rpx;
  }
  .information-data{
    background-color: rgba(0,0,0,0.6);

    .information-top{
      padding-bottom: 34rpx;
      //height: 444rpx;
      .top-head{
        margin-top: 70rpx;
        display: flex;
        justify-content: center;
        .head-box{
          width: 200rpx;
          height: 200rpx;
          border-radius: 50%;
        }
        .head-img{
          margin:22rpx ;
          width: 156rpx;
          height: 156rpx;
          border-radius: 50%;
        }
      }
      .information-proportion{
        margin-top: 16rpx;
        display: flex;
        justify-content: center;
        .proportion-text{
          background: rgba(0,0,0,0.29);
          border-radius: 20rpx;
          height: 56rpx;
          line-height: 56rpx;
          font-size: 28rpx;
          text-align: center;
          padding: 0 16rpx;
        }

      }
      .information-text{
        margin-top: 24rpx;
        text-align: center;
        font-size: 24rpx;
      }

    }
    .edit-data{
      border-radius: 30rpx 30rpx 0 0;
      background-color: #fff;
      padding: 32rpx 32rpx calc(32rpx + env(safe-area-inset-bottom)) 32rpx;
      .photograph-title{
        display: flex;
        justify-content: space-between;
        .title-data{
          .title-text{
            font-size: 32rpx;
            margin-right: 16rpx;
          }
          .num-text{
            font-size: 28rpx;
          }

        }
        .proportion-data{
          font-size: 28rpx;
        }
      }
      .photograph-list{
        height: 336rpx;
        margin-top: 26rpx;
        overflow-x: auto;
        overflow-y: hidden;
        display: flex;
        justify-content: flex-start;
        .photograph-item{
          margin-right: 16rpx;
          .photograph-img{
            width: 240rpx;
            height: 316rpx;
            border-radius: 16rpx;
          }
        }
        .photograph-add{
          width: 240rpx;
          height: 316rpx;
          border-radius: 16rpx;
          background-color: #F9F9F9;
          text-align: center;
          line-height: 316rpx;
          .iconfont{
            font-size: 70rpx;
            color: #999;
          }
        }
      }
      .photograph-describe{
        margin-top: 32rpx;
        font-size: 28rpx;
        text-align: center;
        color: #2F80ED;
      }
      .edit-item{
        margin-top: 40rpx;
        .item-title{
          padding-bottom: 24rpx;
          display: flex;
          justify-content: space-between;
          height: 44rpx;
          .item-title-text{
            font-size: 32rpx;
          }
          .item-title-proportion{
            font-size: 28rpx;
          }

        }
        .item-data{
          background-color: #F9F9F9;
          border-radius: 12rpx;
          display: flex;
          justify-content: space-between;
          padding: 24rpx;
          height: 44rpx;
          .row-text{
            font-size: 28rpx;
          }
          .row-icon{
            .iconfont{
              font-size: 28rpx;
            }
          }


        }
        .item-interest{
          padding: 24rpx;
          height: 172rpx;
          background: #F9F9F9;
          border-radius: 12rpx;
          overflow-x: auto;
          display: flex;
          justify-content: flex-start;
          .interest-item{
            margin-right: 16rpx;
            .interest-img{
              width: 120rpx;
              height: 120rpx;
              border-radius: 50%;
            }
            .interest-text{
              text-align: center;
              font-size: 26rpx;
              color: #BDBDBD;
            }
          }
          .interest-add{
            .interest-add-icon{
              background-color: #E0E0E0;
              width: 120rpx;
              height: 120rpx;
              border-radius: 50%;
              text-align: center;
              line-height: 120rpx;
              .iconfont{
                font-size:60rpx ;
                color: #999;
              }
            }
            .interest-text{
              text-align: center;
              font-size: 26rpx;
              color: #BDBDBD;
              margin-top: 8rpx;
            }
          }


        }
        .item-from{
          border-radius: 16rpx;
          background: #F9F9F9;
          .from-item{
            height: 44rpx;
            padding: 22rpx 24rpx;
            display: flex;
            justify-content: space-between;

            border-bottom: 1rpx solid #F2F2F2;
            .from-item-title{
              font-size: 28rpx;
            }
            .from-item-data{
              display: flex;
              justify-content: space-between;
              .item-data-text{
                font-size: 28rpx;
              }
              .item-data-icon{
                .iconfont{
                  font-size: 28rpx;
                  line-height: 50rpx;
                }
              }
            }
          }
          .from-item:last-child{
            border-bottom: none;
          }
        }

      }
      .edit-but{
        border-radius: 16rpx;
        height: 88rpx;
        line-height: 88rpx;
        text-align: center;
        font-size: 32rpx;
      }

    }
  }
  .popup-box{
    padding: 0 32rpx;
    .popup-title{
      display: flex;
      justify-content: space-between;
      height: 52rpx;
      .title-left{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .left-text{
          font-size: 32rpx;
          line-height: 52rpx;
        }
        .left-wire{
          width: 4rpx;
          height: 32rpx;
          background-color: #FFC107;
          margin-right: 8rpx;
        }

      }
      .title-right{
        padding: 0 24rpx;
        border-radius: 200rpx;
        border: 2rpx solid #141414;
        font-size:28rpx ;
        line-height: 50rpx;
      }
    }
    .popup-data{
      margin-top: 12rpx;
      padding-bottom: 50rpx;
      display: flex;
      flex-wrap: wrap;
      .popup-interest-item{
        margin-top: 32rpx;
        margin-right: 26rpx;
        width: calc((100vw - 116rpx)/3);
        height: 80rpx;
        border-radius: 12rpx;
        background-color: #F2F2F2;
        text-align: center;
        line-height: 80rpx;
        font-size: 28rpx;
      }
      .pitch-item{
        background-color: #FFC107;
        font-weight: 500;
      }
      .popup-interest-item:nth-of-type(3n+0){
        margin-right:0;
      }
    }
  }


}

</style>