yunshengtai-uniapp/pages/release/perfectPersonInfo/index.vue

<template>
<!--pages/release/perfectCompanyInfo/index.wxml-->
<view class="perfect-companyInfo-page">
  <view class="title acea-row row-middle">个人(团队)简介</view>
  <view class="form-box">
    <form @submit="submit">
      <view class="introduction-box">
        <view class="introduction-item acea-row row-between-wrapper">
          <view>团队规模<text class="red">*</text></view>
          <view class="acea-row row-middle">
            <input type="number" placeholder="请填写（人数）" :value="form.enterpriseScale" name="enterpriseScale">
            <image src="/static/images/home/arrow-r.png"></image>
          </view>
        </view>
        <view class="introduction-item acea-row row-between-wrapper">
          <view>主要承接类型<text class="red">*</text></view>
          <view class="acea-row row-middle">
            <!-- <input type="text" placeholder="请填写" valaue="{{form.industryId}}" name="industryId" />
            <image src="../../../images/home/arrow-r.png"></image> -->
            <picker class="pick-box" @change="resourcesChange" :value="idx" :range="resourcesList" :range-key="'cagetoryName'" mode="selector">
              <view class="picker">{{resourcesList[resourcesIdx].cagetoryName || '请选择'}}</view>
            </picker>
          </view>
        </view>
        <view class="introduction-item acea-row row-between-wrapper">
          <view>组建时间<text class="red">*</text></view>
          <view class="acea-row row-middle">
            <picker @change="timeChange" :value="form.establishmentTime" name="establishmentTime" mode="date">
              <view class="picker">{{form.establishmentTime || '请选择'}}</view>
            </picker>
            <!-- <input type="text" placeholder="请填写" value="{{form.establishmentTime}}" name="establishmentTime" /> -->
            <!-- <image src="../../../images/home/arrow-r.png"></image> -->
          </view>
        </view>
      </view>
      <view class="form-item">
        <view class="label-box acea-row row-between-wrapper">
          <view>办公地址<text class="red">*</text></view>
          <view class="chose" @tap="showMap">去选择地址</view>
        </view>
        <view class="inp-box">
          <input type="text" placeholder="企业详细地址" :value="form.enterpriseAddress" name="enterpriseAddress">
        </view>
      </view>
      <view class="form-item">
        <view class="label-box acea-row row-between-wrapper">
          <view>客服电话<text class="red">*</text></view>
        </view>
        <view class="inp-box">
          <input type="text" placeholder="客服电话" :value="form.enterprisePhone" name="enterprisePhone">
        </view>
      </view>
      <view class="form-item">
        <view class="label-box acea-row row-between-wrapper">
          <view>关于我们</view>
        </view>
        <view class="textarea-box">
          <textarea :value="form.resourceIntroduction" name="resourceIntroduction" placeholder="请填写团队简介"></textarea>
        </view>
      </view>
      <view class="form-item">
        <view class="label-box acea-row row-between-wrapper">
          <view>团队展示</view>
        </view>
        <view class="upload-box acea-row">
          <view v-for="(item, index) in form.imgPaths" :key="index" class="img-box">
            <image :src="item"></image>
            <view class="del" @tap="delImg" :data-idx="index"><image src="/static/images/del.png"></image></view>
          </view>
          <image src="/static/images/upload.png" @tap="upImgs"></image>
        </view>
      </view>
      <button class="submit-btn" form-type="submit">保存并提交</button>
    </form>
  </view>
</view>
</template>

<script>
// pages/release/perfectPersonInfo/index.js
const util = require("../../../utils/util.js");
const app = getApp();
import WxValidate from '../../../utils/WxValidate.js';

export default {
  data() {
    return {
      form: {
        enterpriseType: 2,
        enterpriseScale: '',
        businessNature: '',
        establishmentTime: '',
        enterpriseAddress: '',
        latitude: '',
        longitude: '',
        enterprisePhone: '',
        resourceIntroduction: '',
        imgPaths: []
      },
      resourcesList: [],
      resourcesIdx: ""
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.initValidate(); //验证规则函数

    this.getResourcesCagetory();

    if (options.isEdit) {
      this.getEnterpriseInfo();
    }
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    showMap() {
      let that = this;
      uni.getLocation({
        type: 'gcj02',
        //返回可以用于wx.openLocation的经纬度
        success: function (res) {
          uni.chooseLocation({
            latitude: res.latitude,
            longitude: res.longitude,
            scale: 28,
            success: result => {
              console.log(result);
              that.setData({//['form.enterpriseAddress']: result.address
                //['form.latitude']: result.latitude
                //['form.longitude']: result.longitude
              });
              //try fix
              that.form.longitude = result.longitude;
              //try fix
              that.form.latitude = result.latitude;
              //try fix
              that.form.enterpriseAddress = result.address;
            }
          });
        }
      });
    },

    timeChange(e) {
      this.form.establishmentTime = e.detail.value;
    },

    //获取详情
    getEnterpriseInfo() {
      app.http('GET', 'Enterprise/getEnterpriseInfo').then(res => {
        if (res.data.success) {
          let data = res.data.data;
          this.form.imgPaths = data.imgPaths;
          this.form.resourceIntroduction = data.resourceIntroduction;
          this.form.enterprisePhone = data.enterprisePhone;
          this.form.longitude = data.longitude;
          this.form.latitude = data.latitude;
          this.form.establishmentTime = data.establishmentTime;
          this.form.businessNature = data.businessNature;
          this.form.enterpriseAddress = data.enterpriseAddress;
          this.form.enterpriseScale = data.enterpriseScale;
        }
      });
    },

    initValidate() {
      const rules = {
        enterpriseScale: {
          required: true
        },
        industryId: {
          required: true
        },
        establishmentTime: {
          required: true
        },
        enterpriseAddress: {
          required: true
        },
        enterprisePhone: {
          required: true
        }
      };
      const messages = {
        enterpriseAddress: {
          required: '请选择或填写地址'
        },
        enterpriseScale: {
          required: '请填写团队规模'
        },
        industryId: {
          required: '请填写承接类型'
        },
        establishmentTime: {
          required: '请选择组建时间'
        },
        enterprisePhone: {
          required: '请填写客服电话'
        }
      };
      this.WxValidate = new WxValidate(rules, messages);
    },

    //获取供应、需求类型
    getResourcesCagetory() {
      app.http('GET', 'ResourcesCagetory/listResourcesCagetory').then(res => {
        // console.log(res)
        if (res.data.success) {
          this.setData({
            resourcesList: res.data.data
          });
        }
      });
    },

    resourcesChange(e) {
      let idx = Number(e.detail.value);
      this.setData({
        resourcesIdx: idx,
      });
      this.form.industryId = this.resourcesList[idx].id;
    },

    upImgs() {
      util.chooseImages2(img => {
        let imgs = this.form.imgPaths;
        imgs.push(img);
        this.setData({//['form.imgPaths']: imgs
        });
        //try fix
        this.form.imgPaths = imgs;
      });
    },

    delImg(e) {
      let idx = e.currentTarget.dataset.idx;
      let imgPaths = this.form.imgPaths;
      imgPaths.splice(idx, 1);
      this.setData({//['form.imgPaths']: imgPaths
      });
      //try fix
      this.form.imgPaths = imgPaths;
    },

    submit(e) {
      let that = this;
      uni.showModal({
        title: '提示！',
        content: '是否确认提交？',

        success(res) {
          if (res.confirm) {
            const params = e.detail.value;
            params.enterpriseType = 2;
            params.imgPaths = that.form.imgPaths;
            params.industryId = that.form.industryId;

            if (!that.WxValidate.checkForm(params)) {
              const error = that.WxValidate.errorList[0];
              that.showModal(error);
              return false;
            }

            app.http('post', 'Enterprise/completeEnterprise', params).then(res => {
              if (res.data.success) {
                uni.showToast({
                  title: '提交成功',
                  duration: 2000
                });
                setTimeout(() => {
                  uni.navigateBack({
                    delta: 1
                  });
                }, 2000);
              }
            });
          } else {
            console.log('已取消');
          }
        }

      });
    },

    showModal(error) {
      uni.showModal({
        content: error.msg,
        showCancel: false
      });
    }

  }
};
</script>
<style>
/* pages/release/perfectCompanyInfo/index.wxss */
.perfect-companyInfo-page{
  width: 100%;
  padding: 24rpx 40rpx;
  border-top: 2rpx solid #EEEEEE;
}
.introduction-box{
  font-size: 28rpx;
  color: #666666;
  padding-bottom: 30rpx;
  border-bottom: 2rpx solid #EEEEEE;
}
.introduction-item{
  margin-top: 20rpx;
}
.introduction-item input{
  /* width: 100rpx; */
  text-align: right;

}
.introduction-item image{
  width: 13rpx;
  height: 24rpx;
  margin-left: 10rpx;
} 
.title{
  color: #1D1D1D;
  font-size: 32rpx;
}
.title::before{
  content: '';
  display: inline-block;
  width: 8rpx;
  height: 42rpx;
  background: #FF7942;  
  border-radius: 4rpx;
  margin-right: 10rpx;
}
.form-box{
  font-size: 28rpx;
  color: #666666;
}
.picker{
  font-size: 28rpx;
  color: #666666;
}
.form-item{
  margin-top: 22rpx;
}
.red{
  color: #FF0000;
}
.inp-box{
  width: 100%;
  height: 60rpx;
  background: #EEEEEE;
  border-radius: 4rpx;
  padding-left: 22rpx;
  margin-top: 20rpx;
}
.inp-box input{
  width: 100%;
  height: 100%;
}
.upload-box{
  width: 100%;
  margin-top: 20rpx;
  padding-bottom: 24rpx;
  border-bottom: 2rpx solid #EEEEEE;
}
.upload-box image{
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
}
.img-box{
  width: 120rpx;
  height: 120rpx;
  position: relative;
  margin-right: 14rpx;
  margin-bottom: 20rpx;
  border-radius: 8rpx;
}
.img-box .del{
  width: 32rpx;
  height: 32rpx;
  position: absolute;
  top: -16rpx;
  right: -12rpx;
  font-weight: bold;
}
.del image{
  width: 100%;
  height: 100%;
}
.textarea-box{
  width: 100%;
  height: 352rpx;
  background: #EEEEEE;
  border-radius: 4rpx;
  padding: 22rpx;
  margin-top: 20rpx;
}
.textarea-box textarea{
  width: 100%;
  height: 100%;
  line-height: 40rpx;
}
.submit-btn{
  width: 670rpx !important;
  height: 76rpx !important;
  background: linear-gradient(144deg, #FFA782 0%, #FF5100 100%);
  border-radius: 38rpx;
  color: #fff;
  font-size: 28rpx !important;
  line-height: 76rpx !important;
  text-align: center;
  margin:40rpx auto !important;
  padding: 0 !important;
}
</style>