warm_man/pages/User/edit.vue

<template>
  <view class="body-background"></view>
  <u-navbar
      :title="title"
      :auto-back="true"
      left-icon-size="40rpx"
      :safe-area-inset-top="true"
      :placeholder="true"
      bgColor="#ffffff"
  ></u-navbar>
  <view class="app-wallpaper">
    <u-row :custom-style="{
      backgroundColor:'#fff',
      borderRadius:'10rpx',
      alignItems:'flex-start'
    }">
      <u-col :custom-style="{padding:'30rpx 40rpx',height:size.height+'px'}">
        <u-form
            errorType="toast"
            labelPosition="left"
            :model="model"
            :rules="rules"
            ref="userInfo"
            labelWidth="200rpx"
        >
          <u-form-item
              :custom-style="{
                  padding:'34rpx 0'
              }"
              label="姓名"
              prop="userInfo.name"
              borderBottom

          >
            <u-input
                type="nickname"
                fontSize="28"
                placeholder="请填写您的真实姓名"
                v-model="model.userInfo.name"
                border="none"
            ></u-input>
          </u-form-item>
          <u-form-item
              :custom-style="{
                  padding:'34rpx 0'
              }"
              label="手机号码"
              prop="userInfo.phone"
              borderBottom

          >
            <u-input
                fontSize="28"
                placeholder="请输入"
                v-model="model.userInfo.phone"
                border="none"
            ></u-input>
          </u-form-item>
          <u-form-item
              :custom-style="{
                  padding:'34rpx 0'
              }"
              label="所属街道"
              prop="userInfo.street"
              borderBottom

          >
            <u-text
                @click="openStreetPicker"
                :text="model.userInfo.street||'请选择'"
                size="28"
                :color="model.userInfo.street?'#020B18':'#AFB5BE'"
                suffixIcon="arrow-right"
                :icon-style="{color:(model.userInfo.street?'#020B18':'#AFB5BE')}"
            ></u-text>
          </u-form-item>
          <u-form-item
              :custom-style="{
                  padding:'34rpx 0'
              }"
              label="所属社区"
              prop="userInfo.community"
              borderBottom

          >
            <u-text
                @click="openCommunityPicker"
                :text="model.userInfo.community||'请选择'"
                size="28"
                :color="model.userInfo.community?'#020B18':'#AFB5BE'"
                suffixIcon="arrow-right"
                :icon-style="{color:(model.userInfo.community?'#020B18':'#AFB5BE')}"
            ></u-text>
          </u-form-item>

          <u-form-item
              :custom-style="{
                  padding:'34rpx 0',
                  position:'relative'
              }"
              label="公司全称"
              prop="userInfo.company"
              borderBottom

          >
            <view class="" v-if="tipShow && tips.length > 0" style="
              background-color:#fff;
              border:2rpx solid #dedede;
              border-radius: 20rpx;
              position: absolute;
              top:110%;
              z-index: 10;
              padding:0 20rpx;
            ">
              <view
                  v-for="(item,index) in tips"
                  class=""
                  style="
                    border-bottom:2rpx solid #dedede;
                    padding:20rpx 0;
                    min-width:150rpx;
                  "
                  @click="selectTip(item)"
                  @mousedown.prevent>
                <u-text :text="item" size="28"></u-text>
              </view>
<!--              <view style="padding:20rpx 0;display:flex;justify-content: flex-end;text-align: right;" @click="tipShow = false;">-->
<!--                <u-button text="关闭提示" size="mini" custom-style="background-color:#FF9545;"></u-button>-->
<!--              </view>-->
            </view>
            <u-input
                fontSize="28"
                placeholder="请输入"
                v-model="model.userInfo.company"
                border="none"
                @change="filterTip"
                @focus="filterTip"
                @blur="blurCompany"
            >
            </u-input>

          </u-form-item>
          <u-form-item
              :custom-style="{
                  padding:'34rpx 0'
              }"
              label="职业分类"
              prop="userInfo.position"
              borderBottom
          >
            <u-text
                @click="openPositionPicker"
                :text="model.userInfo.position||'请选择'"
                size="28"
                :color="model.userInfo.position?'#020B18':'#AFB5BE'"
                suffixIcon="arrow-right"
                :icon-style="{color:(model.userInfo.position?'#020B18':'#AFB5BE')}"
            ></u-text>
            <u-input
                fontSize="28"
                placeholder="请输入"
                v-model="model.userInfo.position_text"
                border="none"
                custom-style="margin-top:20rpx;"
                v-if="(model.userInfo.position === '其他')"
            ></u-input>
          </u-form-item>
          <u-form-item
              :custom-style="{
                  padding:'34rpx 0'
              }"
              label="身份证号码"
              prop="userInfo.id_card"

          >
            <u-input
                fontSize="28"
                placeholder="请输入"
                v-model="model.userInfo.id_card"
                border="none"
            ></u-input>
          </u-form-item>
        </u-form>
      </u-col>
    </u-row>
  </view>
  <view class="foot-button border-box">
    <u-button
        type="primary"
        text="保存"
        shape="circle"
        :custom-style="{
              color:'#020B18',
              backgroundColor:'#FF9545',
              border:'none',
              fontSize:'36',
              fontWeight:'400',
              height:'80rpx'
            }"
        @click="submit"
    ></u-button>
  </view>
  <uv-picker
      ref="street"
      :columns="[streetList]"
      keyName="name"
      @confirm="selectStreet"></uv-picker>
  <uv-picker
      ref="community"
      :columns="[communityList]"
      keyName="name"
      @confirm="selectCommunity"></uv-picker>
  <uv-picker
      ref="position"
      :columns="[positionList]"
      keyName="name"
      @confirm="selectPosition"></uv-picker>
</template>

<script>
import {
  imghost
} from '@/config/host.js'
import MzSubsection from '@/components/MzSubsection/Index.vue';
import api from '@/utils/functions.js';
import {userDetail, userEdit, userExtends} from "@/api/user";
import {getCommonStreet, systemConfig} from "@/api/other";

export default {
  components: {
    MzSubsection
  },
  data() {
    return {
      companyTip:[],
      tipShow:false,
      tips:[],
      model: {
        userInfo: {
          name:'',
          phone:'',
          street:'',
          community:'',
          company:'',
          position:'',
          id_card:'',
          position_text:'',
        },
      },
      rules: {
        'userInfo.name': {
          type: 'string',
          required: true,
          message: '请填写姓名',
          trigger: ['blur', 'change']
        },
        'userInfo.phone': {
          type: 'string',
          required: true,
          message: '请填写手机号码',
          trigger: ['blur', 'change']
        },
        'userInfo.street': {
          type: 'string',
          required: true,
          message: '请选择所属街道',
          trigger: ['blur', 'change']
        },
        'userInfo.community': {
          type: 'string',
          required: true,
          message: '请选择所属社区',
          trigger: ['blur', 'change']
        },
        'userInfo.company': {
          type: 'string',
          required: true,
          message: '请填写公司全称',
          trigger: ['blur', 'change']
        },
        'userInfo.id_card': {
          type: 'string',
          required: true,
          message: '请填写身份证号码',
          trigger: ['blur', 'change']
        },
        'userInfo.position': {
          type: 'string',
          required: true,
          message: '请填写职业分类',
          trigger: ['blur', 'change']
        },
      },
      sexList:[
        {
          id:1,
          name: '男',
          disabled: false,
        },
        {
          i:2,
          name: '女',
          disabled: false,
        },
      ],
      current: 1,
      title: '编辑资料',
      loading: true,
      staticImage: {
        bg: imghost + '/BG.png',
        newIcon: imghost + '/new-icon.png',
      },
      size: {
        height: 500,
      },
      streetList:[],
      communityList:[],
      positionList:[],
    }
  },
  onLoad() {

  },
  onReady() {
    let that = this;
    let height = api.wxSystemInfo().system.windowHeight
    let headerHeight = uni.$u.getPx(44) + uni.$u.sys().statusBarHeight

    let info = uni.createSelectorQuery().in(this).select('.foot-button');
    info.boundingClientRect(function (data) {
      that.size.height = that.size.height = height - headerHeight - data.height - uni.$u.getPx('32rpx');
    }).exec(function (res) {

    });
  },
  computed: {
    api() {
      return api
    },
    sectionStyle() {
      const style = {};
      style.padding = '0 26rpx';
      style.position = 'sticky';
      style.zIndex = '9999';
      style.top = api.navHeight().systemBarHeight + 'px'
      return style;
    },
    listHeight() {
      let that = this;
      let height;
      let info = uni.createSelectorQuery().in(this).select('.subsection');
      info.boundingClientRect(function (data) {
        that.size.height = data.height;
      }).exec(function (res) {

      });
      // that.size.height = (api.navHeight().windowHeight - height);
    }
  },
  mounted() {
    this.initForm();
    this.getPickerData();
    this.getTips();
  },
  methods: {
    blurCompany(){
      uni.$u.sleep(50).then(() => {
        this.tipShow = false;
      });
    },
    selectTip(item){
      this.model.userInfo.company = item;
      this.tipShow = false;
    },
    getTips(){
      systemConfig({
        type:'company'
      }).then(res => {
        this.companyTip = res.data;
      });
    },
    filterTip(){
      let i = 0;
      this.tips = this.companyTip.filter(res => {
        i++;
        return (res.indexOf(this.model.userInfo.company)!==-1 && i<=5);
      })
      this.tipShow = true;
    },
    initForm(){
      if(uni.getStorageSync('user')){
        this.model.userInfo = uni.getStorageSync('user');
      }else{
        userDetail().then((res)=>{
          this.model.userInfo = res.data;
        })
      }
      console.log(this.model.userInfo)
    },
    openStreetPicker(){
      this.$refs.street.open();
    },
    openCommunityPicker(){
      this.$refs.community.open();
    },
    openPositionPicker(){
      this.$refs.position.open();
    },
    selectStreet(e){
      this.model.userInfo.street = e.value[0].name;
      this.communityList = e.value[0].children;
    },
    selectCommunity(e){
      this.model.userInfo.community = e.value[0].name;
    },
    selectPosition(e){
      this.model.userInfo.position = e.value[0].name;
    },
    getPickerData(){
      systemConfig({
        type:'job_type'
      }).then(res => {
        this.positionList = res.data;
        console.log(this.positionList)
      })
      getCommonStreet({}).then(res => {
        this.streetList = res.data
      });
    },
    chatDetail(item) {
      wx.navigateTo({
        url: '/pages/ChatDetail/index?id=' + item.id
      });
    },
    checkSection(index) {
      this.current = edit;
    },
    scrollToLower() {

    },
    submit(){
      if(this.model.userInfo.position_text)this.model.userInfo.position = this.model.userInfo.position_text
      this.$refs.userInfo.validate().then(res => {
        userEdit(this.model.userInfo).then((res) => {
          if(res.code === 200){
            uni.$u.toast('修改成功')
            userDetail().then((res) => {
              uni.setStorageSync('user',res.data);
              this.$store.commit('userInfo',res.data);
              uni.navigateBack({delta:1})
            });
          }else{
            uni.$u.toast(res.msg)
          }
        })
      }).catch(errors => {
        uni.$u.toast(errors[0].message)
      })
    },
    getUserExtend() {
      userExtends().then((res) => {
        if(res.code === 200) {
          this.userInfo = res.data;
          uni.setStorageSync('user', res.data);
          this.$store.commit('userInfo', res.data);
        }
      });
    }
  },
  onPageScroll(res) {
    if (res.scrollTop <= 20) {
      uni.$emit('isTop', true);
    } else {
      uni.$emit('isTop', false);
    }
  },
  created() {

    // this.pagePadding = (api.navHeight().navPaddingTop +
    // 	api.navHeight().navHeight + (api.navHeight().headerPadding * 2))
  },

}
</script>

<style lang="scss">
@import './components/index.scss';
</style>