yunshengtai-uniapp/pages/release/perfectCompanyInfo/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="form-item">
      <view class="label-box acea-row row-between-wrapper">
        <view>企业地址<text class="red">*</text></view>
        <!-- <view class="chose">去选择地址</view> -->
        <button @tap="showMap" class="chose">去选择地址</button>
      </view>
      <view class="inp-box">
        <input type="text" placeholder="企业详细地址" name="enterpriseAddress" :value="form.enterpriseAddress">
      </view>
    </view>
    <view class="form-item">
      <view class="label-box acea-row row-between-wrapper">
        <view>企业logo<text class="red">*</text></view>
      </view>
      <view class="upload-box">
        <image src="/static/images/upload.png" v-if="form.enterpriseLogo == ''" @tap="uploadImg" data-type="logo"></image>
        <image :src="form.enterpriseLogo" v-else @tap="uploadImg" data-type="logo" mode="aspectFill"></image>
      </view>
    </view>
    <view class="form-item">
      <view class="label-box acea-row row-between-wrapper">
        <view>企业slogan<text class="red">*</text></view>
      </view>
      <view class="inp-box">
        <input type="text" placeholder="企业slogan" name="enterpriseTitle" :value="form.enterpriseTitle">
      </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.businessNature" name="businessNature">
      </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="https://*******" :value="form.enterpriseNet" name="enterpriseNet">
      </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"></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 form-type="submit" class="submit-btn">保存并提交</button>
      <!-- <view class="submit-btn" bindtap="submit">保存并提交</view> -->
    </form> 
  </view>
  
  
</view>
</template>

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

export default {
  data() {
    return {
      form: {
        enterpriseType: 1,
        enterpriseAddress: '',
        businessNature: '',
        latitude: '',
        longitude: '',
        enterpriseLogo: '',
        enterpriseTitle: '',
        enterpriseLabel: '',
        enterpriseNet: '',
        enterprisePhone: '',
        resourceIntroduction: '',
        imgPaths: []
      }
    };
  },

  components: {},
  props: {},

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

    console.log(options);

    if (options.isEdit) {
      this.getEnterpriseInfo();
    }
  },
  methods: {
    //获取详情
    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.enterpriseNet = data.enterpriseNet;
          this.form.enterpriseLabel = data.enterpriseLabel;
          this.form.enterpriseTitle = data.enterpriseTitle;
          this.form.enterpriseLogo = data.enterpriseLogo;
          this.form.longitude = data.longitude;
          this.form.latitude = data.latitude;
          this.form.businessNature = data.businessNature;
          this.form.enterpriseAddress = data.enterpriseAddress;
        }
      });
    },

    initValidate() {
      const rules = {
        enterpriseAddress: {
          required: true
        },
        enterpriseLogo: {
          required: true
        },
        enterpriseTitle: {
          required: true
        },
        businessNature: {
          required: true
        },
        enterpriseNet: {
          required: true
        },
        enterprisePhone: {
          required: true
        }
      };
      const messages = {
        enterpriseAddress: {
          required: '请选择或填写地址'
        },
        enterpriseLogo: {
          required: '请上传企业Logo'
        },
        enterpriseTitle: {
          required: '请填写企业slogan'
        },
        businessNature: {
          required: '请填写企业经营范围'
        },
        enterpriseNet: {
          required: '请填写企业网站'
        },
        enterprisePhone: {
          required: '请填写客服电话'
        }
      };
      this.WxValidate = new WxValidate(rules, messages);
    },

    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 => {
              that.form.longitude = result.longitude;
              that.form.latitude = result.latitude;
              that.form.enterpriseAddress = result.address;
            }
          });
        }
      });
    },

    uploadImg(e) {
      let type = e.currentTarget.dataset.type;
      util.chooseImages(img => {
        if (type == 'logo') {
          this.form.enterpriseLogo = img;
        }
      });
    },

    upImgs() {
      util.chooseImages2(img => {
        let imgs = this.form.imgPaths;
        imgs.push(img);
        this.form.imgPaths = imgs;
      });
    },

    delImg(e) {
      let idx = e.currentTarget.dataset.idx;
      let imgPaths = this.form.imgPaths;
      imgPaths.splice(idx, 1);
      this.form.imgPaths = imgPaths;
    },

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

        success(res) {
          if (res.confirm) {
            const params = e.detail.value;
            params.enterpriseType = 1;
            params.latitude = that.form.latitude;
            params.longitude = that.form.longitude;
            params.enterpriseLogo = that.form.enterpriseLogo;
            params.imgPaths = that.form.imgPaths;

            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;
}
.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;
}
.form-item{
  margin-top: 22rpx;
}
.chose{
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  background: #fff;
  font-size: 26rpx;
  color: #666;
  font-weight: normal;
}
.chose::after{
	border: none;
}
.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;
  margin-right: 20rpx;
}
.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>