You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

400 lines
10 KiB

3 years ago
<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: #292929;
3 years ago
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: #292929;
3 years ago
border-radius: 38rpx;
color: #fff;
font-size: 28rpx !important;
line-height: 76rpx !important;
text-align: center;
margin:40rpx auto !important;
padding: 0 !important;
}
</style>