yunshengtai-uniapp/pages/demandHall/resourcesContact/index.vue

<template>
<!--pages/demandHall/contact/index.wxml-->
<view class="contact-page">
  <view class="company-card-box acea-row-nowrap">
    <image :src="resourcesDetail.enterprise.enterpriseLogo" class="company-logo" mode="aspectFill"></image>
    <view class="info">
      <view class="company-name line1">{{resourcesDetail.title}}</view>
      <view class="tags-box">
        <view class="tag-item">{{resourcesDetail.cname}}</view>
      </view>
      <view class="slogan line1">{{resourcesDetail.enterprise.enterpriseName}}</view>
    </view>
  </view>
  <view class="tips acea-row row-middle">
    <view class="t-icon">!</view>
    <text>请明确您的需求！</text>
  </view>
  <!-- <view class="needs-list" v-if="resourcesList.length > 0">
    <view v-for="(item, index) in resourcesList" :key="index" class="need-item" @tap="needItemClick" :data-id="item.id">
      <view :class="'n-title ' + (active == item.id ? 'n-title-a' : '') + ' acea-row row-middle'">
        <view class="dot"></view>
        <text>发送需求给企业(个人)</text>
      </view>
      <view class="n-title-box acea-row row-between row-middle">
        <view>{{item.title}}</view>
        <view class="colO">发布中</view>
      </view>
      <view class="n-tags acea-row">
        <view class="n-tag-item">{{item.cname}}</view>
      </view>
    </view>
  </view> -->
  <view class="area-box">
    <textarea placeholder="请输入您的申请内容" :value="content" @input="inpChange"></textarea>
  </view>
  <view class="submit-btn" @tap="submit">提交申请</view>
</view>
</template>

<script>
// pages/demandHall/contact/index.js
const app = getApp();

export default {
  data() {
    return {
      active: null,
      resourcesDetail: {},
      resourcesList: [],
      content: ''
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options);
    let data = JSON.parse(decodeURIComponent(options.detail));
    this.setData({
      resourcesDetail: data
    });
    console.log(this.resourcesDetail);
    this.getList();
  },
  methods: {
    needItemClick(e) {
      let id = e.currentTarget.dataset.id;
      console.log(id);
      this.setData({
        active: e.currentTarget.dataset.id
      });
    },

    inpChange(e) {
      console.log(e);
      this.setData({
        content: e.detail.value
      });
    },

    getList() {
      app.http('post', 'Resources/listMyResourcesPublish', {
        resourceType: 2
      }).then(res => {
        if (res.data.success) {
          res.data.data.content.length > 0 ? this.setData({
            active: res.data.data.content[0].id
          }) : this.setData({
            active: null
          });
          this.setData({
            resourcesList: res.data.data.content
          });
        }
      });
    },

    submit() {
      if (this.content == '' && this.active == null) {
        uni.showToast({
          title: '请填写您的申请内容！',
          icon: 'none'
        });
        return;
      }

      let data = {
        resourceId: this.resourcesDetail.id,
        demandId: this.active,
        content: this.content
      };
      app.http('post', 'Communicate/create', data).then(res => {
        if (res.data.success) {
          uni.showToast({
            title: '提交成功！',
            duration: 2000
          });
          setTimeout(() => {
            uni.navigateBack({
              delta: 1
            });
          }, 2000);
        } else {
          uni.showToast({
            title: res.data.msg,
            icon: 'none'
          });
        }
      });
    }

  }
};
</script>
<style>
/* pages/demandHall/contact/index.wxss */
.contact-page{
  width: 100%;
  min-height: 100vh;
  padding: 40rpx;
  background: #EFEFEF;
}
.company-card-box {
  width: 100%;
  height: 210rpx;
  padding: 30rpx 12rpx;
  background: #FFFFFF;
  box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.16);
  border-radius: 12rpx;
}
.info{
  width: 70%;
}
.company-logo{
  width: 150rpx;
  height: 150rpx;
  margin-right: 20rpx;
}
.company-name{
  font-size: 36rpx;
  line-height: 56rpx;
  font-weight: 500;
  color: #1D1D1D;
}
.slogan{
  font-size: 24rpx;
  line-height: 34rpx;
  color: #666;
  margin: 4rpx 0 12rpx;
}
.tags-box{
  margin: 6rpx 0 10rpx;
}
.tag-item{
  width: auto;
  padding: 0 10rpx;
  height: 36rpx;
  display: inline-block;
  line-height: 36rpx;
  text-align: center;
  font-size: 20rpx;
  background: linear-gradient(314deg, #FF5100 0%, #FF8800 100%);
  color: #fff;
  border-radius: 8rpx;
  margin-right: 8rpx;
}
.tips{
  margin: 32rpx 0;
  font-size: 24rpx;
  color: #1D1D1D;
}
.t-icon{
  width: 28rpx;
  height: 28rpx;
  border-radius: 50%;
  border: 1px solid #1D1D1D;
  text-align: center;
  line-height: 25rpx;
  color: #1D1D1D;
  font-size: 24rpx;
  font-weight: bold;
  margin-right: 10rpx;
}
.needs-list{
  width: 100%;
}
.need-item{
  width: 100%;
  padding: 20rpx 0;
  background: #FFFFFF;
  box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.16);
  border-radius: 12rpx;
  margin-bottom: 32rpx;
}
.n-title{
  width: 100%;
  padding: 18rpx 26rpx;
  border-bottom: 2rpx solid #E2E2E2;
  font-size: 24rpx;
  color: #979797;
  font-weight: 500;
}
.dot{
  width: 28rpx;
  height: 28rpx;
  border: 2rpx solid #979797;
  border-radius: 50%;
  margin-right: 6rpx;
}
.n-title-a .dot{
  position: relative;
  border-color: #FF7E42;
}
.n-title-a .dot::before{
  content: '';
  display: inline-block;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  border-color: #FF7E42;
  background: #FF7E42;
  position: absolute;
  top: 2rpx;
  left: 2rpx;
}
.n-title-a{
  color: #FF7E42;
}

.n-title-box{
  padding: 0 26rpx;
  font-size: 28rpx;
  color: #1D1D1D;
  margin: 16rpx 0 8rpx;
}
.colO{
  color: #FF5100;
  font-size: 500;
}
.n-tags{
  padding: 0 26rpx;
}
.n-tag-item{
  width: auto;
  height: 36rpx;
  padding: 0 8rpx;
  line-height: 34rpx;
  text-align: center;
  border: 1rpx solid #FFAA00;
  color: #FFAA00;
  border-radius: 4rpx;
  margin-right: 8rpx;
  font-size: 24rpx;
}
.bgG{
  border: 1rpx solid #3A9EFA;
  color: #3A9EFA;
}
.bgO{
  border: 1rpx solid #FC9367;
  color: #FC9367;
}
.area-box{
  width: 100%;
  height: 900rpx;
  padding: 42rpx 24rpx;
  background: #fff;
  border-radius: 12rpx;
}
.area-box textarea{
  width: 100%;
  height: 50%;
}
.submit-btn{
  width: 240rpx;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background: linear-gradient(134deg, #FFA782 0%, #FF6D31 100%);
  border-radius: 12rpx;
  font-size: 32rpx;
  color: #fff;
  /* margin: 32rpx auto; */
  position: absolute;
  bottom: 80rpx;
  left: 50%;
  margin-left: -120rpx;
}
</style>