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

<template>
<!--pages/demandHall/companyDetail/index.wxml-->
<view class="companyDetail-page">
  <view class="top-box">
    <image class="top-bg-img" :src="detail.enterpriseLogo" mode="aspectFill"></image>
    <view class="top-bg"></view>
    <view class="top-content">
      <view class="company-info-box acea-row-nowrap">
        <image :src="detail.enterpriseLogo" class="company-logo" mode="aspectFill"></image>
        <view class="info">
          <view class="company-name">{{detail.enterpriseName}}</view>
          <view class="slogan">{{detail.enterpriseTitle}}</view>
          <view class="tags-box">
            <view class="tag-item">{{detail.cname}}</view>
          </view>
        </view>
      </view>
      <view class="company-contact-box">
        <view class="contact-item">
          <image src="/static/images/home/c-location.png"></image>
          <text>{{detail.enterpriseAddress}}</text>
        </view>
        <view class="contact-item">
          <image src="/static/images/home/c-site.png"></image>
          <text>{{detail.enterpriseNet}}</text>
        </view>
        <view class="contact-item" @tap="call">
          <image src="/static/images/home/c-phone.png"></image>
          <text>{{detail.enterprisePhone}}</text>
        </view>
      </view>
    </view>
  </view>
  <view class="tabs-box acea-row row-between">
    <view :class="'tab ' + (tabActive == 1 ? 'tab-a' : '')" data-i="1" @tap="tabClick">首页</view>
    <view :class="'tab ' + (tabActive == 2 ? 'tab-a' : '')" data-i="2" @tap="tabClick">资源({{detail.resourceList.length || 0}})</view>
    <view :class="'tab ' + (tabActive == 3 ? 'tab-a' : '')" data-i="3" @tap="tabClick">需求({{detail.demandList.length || 0}})</view>
  </view>
  <view class="tab-content-box">
    <!-- 首页 -->
    <view class="home-box" v-if="tabActive == 1">
      <view class="title-box acea-row row-middle">
        <view class="col-line"></view>
        <text>基本信息</text>
      </view>
      <view class="info-box">
        <view class="info-item acea-row-nowrap">
          <view>企业名称</view>
          <view class="colG">{{detail.enterpriseName}}</view>
        </view>
        <view class="info-item acea-row-nowrap">
          <view>所属类型</view>
          <view class="colG">{{detail.enterpriseType == 1? '企业' : '个人团队' }}</view>
        </view>
        <view class="info-item acea-row-nowrap">
          <view>法定代表</view>
          <view class="colG">{{detail.legalPersonName}}</view>
        </view>
        <view class="info-item acea-row-nowrap">
          <view>企业规模</view>
          <view class="colG">{{detail.enterpriseScale}}人</view>
        </view>
        <view class="info-item acea-row-nowrap">
          <view>经营范围</view>
          <view class="colG">{{detail.businessNature}}</view>
        </view>
      </view>
			<view class="about-box">
        <view class="title-box acea-row row-middle">
          <view class="col-line"></view>
          <text>关于我们</text>
        </view>
        <view class="about">
          <text>{{detail.resourceIntroduction}}</text>
        </view>
      </view>
      <view class="company-show-box">
        <view class="title-box acea-row row-middle">
          <view class="col-line"></view>
          <text>公司展示</text>
        </view>
        <view>
          <swiper class="swiper-block" autoplay="true" circular="true" previous-margin="90rpx" next-margin="90rpx" current="0" @change="swiperChange">
            <block v-for="(item, index) in detail.imgPaths" :key="index">
              <swiper-item class="swiper-item" @tap="previewImg">
                <image mode="aspectFill" :src="item" :class="'slide-image ' + (swiperIndex == index ? 'active' : '')"></image>
              </swiper-item>
            </block>
          </swiper>
        </view>
      </view>
      <view class="toSite" @tap="toWebview"><text>更多信息请见官网></text></view>
    </view>
    <!-- 资源 -->
    <view class="resources-box" v-if="tabActive == 2">
      <view class="resources-list">
        <view v-for="(item, index) in detail.resourceList" :key="index" class="resources-item" :data-id="item.id" @tap="toResourcesDetail">
          <view class="item-top acea-row-nowrap">
            <image :src="item.resourceImgs[0]" mode="aspectFill"></image>
            <view class="info">
              <view class="r-title line1">{{item.title}}</view>
              <view class="r-price">资金需求:{{item.capital}}</view>
              <view class="r-tips line2">{{item.detailedDescription}}</view>
            </view>
          </view>
          <view class="btn-box acea-row row-middle row-between">
            <view class="btn-box-l">
              <view class="line1">发布日期 {{item.resourceStartTime}} </view>
              <view class="line1">{{item.enterpriseAddress}}</view>
            </view>
            <view class="toMore-btn">了解详情</view>
          </view>
        </view>
        <!-- <view class="resources-item" bindtap="toResourcesDetail">
          <view class="item-top acea-row-nowrap">
            <image src="../../../images/home/welfare2.png"></image>
            <view class="info">
              <view class="r-title line1">教育类学校教育类学校官网网站建设官网网站建设</view>
              <view class="r-price">资金需求:100万</view>
              <view class="r-tips">针对中小学教育机构、课外培训辅导机构，提供官网升级优化和专业的网站建设定制化服务。</view>
            </view>
          </view>
          <view class="btn-box acea-row row-middle row-between">
            <view>
              <view>发布日期 2021.8.30 </view>
              <view>武汉市江汉区滨江国际A座-楚牛科技</view>
            </view>
            <view class="toMore-btn">了解详情</view>
          </view>
        </view> -->
      </view>
    </view>
    <!-- 需求 -->
    <view class="needs-box" v-if="tabActive == 3">
      <view class="company-list">
        <view v-for="(item, index) in detail.demandList" :key="index" class="company-item" :data-id="item.id" @tap="toNeedsDetail">
          <view class="title-box acea-row row-between">
            <view class="title line1">{{item.title}}</view>
            <view class="price">{{item.capital}}</view>
          </view>
          <view class="tags-box">
            <view class="tag-item">网站建设</view>
            <view class="tag-item bgG">IT软件</view>
            <view class="tag-item bgO">APP开发</view>
          </view>
          <view class="desc line2">{{item.detailedDescription}}</view>
          <view class="btn-box acea-row row-between row-middle">
            <view class="end-time">{{item.resourceEndTime}}截止报名</view>
            <view class="toMore-btn">了解详情</view>
          </view>
        </view>
        <!-- <view class="company-item" >
          <view class="title-box acea-row row-between">
            <view class="title line1">我需要公司官网设计需要公司官网设计需要公司官网设计</view>
            <view class="price">¥20,000</view>
          </view>
          <view class="tags-box">
            <view class="tag-item">网站建设</view>
            <view class="tag-item bgG">IT软件</view>
            <view class="tag-item bgO">APP开发</view>
          </view>
          <view class="desc line2">针对中小学教育机构、课外培训辅导机构。</view>
          <view class="btn-box acea-row row-between row-middle">
            <view class="end-time">2021.8.30截止报名</view>
            <view class="toMore-btn">了解详情</view>
          </view>
        </view> -->
      </view>
    </view>
  </view>
</view>

</template>

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

export default {
  data() {
    return {
      id: '',
      detail: {},
      tabActive: 1,
      swiperImgUrls: ["/static/images/home/item-bg.png", "/static/images/home/company-top-bg.png"],
      swiperIndex: 0
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
       id: options.id
    });
    this.getDetail();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    previewImg() {
      uni.previewImage({
        current: this.detail.imgPaths[0],
        // 当前显示图片的http链接
        urls: this.detail.imgPaths // 需要预览的图片http链接列表

      });
    },

    call() {
      uni.makePhoneCall({
        phoneNumber: this.detail.enterprisePhone
      });
    },

    tabClick(e) {
      this.setData({
        tabActive: e.currentTarget.dataset.i
      });
    },

    swiperChange(e) {
      const that = this;
      that.setData({
        swiperIndex: e.detail.current
      });
    },

    toNeedsDetail(e) {
      let id = e.currentTarget.dataset.id;
      uni.navigateTo({
        url: '/pages/demandHall/needsDetail/index?id=' + id
      });
    },

    toResourcesDetail(e) {
      let id = e.currentTarget.dataset.id;
      uni.navigateTo({
        url: '/pages/demandHall/resourcesDetail/index?id=' + id
      });
    },

    getDetail() {
      app.http('get', 'Enterprise/enterpriseInfo', {
        id: this.id
      }).then(res => {
        if (res.data.success) {
          this.setData({
            detail: res.data.data
          });
        }
      });
    },

    toWebview() {
      if (this.detail.enterpriseNet != '') {
        uni.navigateTo({
          url: '/pages/webview/index?src=' + this.detail.enterpriseNet
        });
      }
    }

  }
};
</script>
<style>
/* pages/demandHall/companyDetail/index.wxss */
.top-box{
  width: 100%;
  height: 420rpx;
  position: relative;
}
.top-bg-img{
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
}
.top-bg{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.4);
  position: absolute;
  z-index: 2;
}
.top-content{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 3;
  color: #fff;
  padding: 40rpx 0 0 22rpx;
}
.company-info-box{
  width: 100%;
}
.company-logo{
  width: 150rpx;
  height: 150rpx;
  margin-right: 20rpx;
  border-radius: 8rpx;
}
.info{
  width: calc(100% - 192rpx);
}
.name{
  font-size: 32rpx;
  line-height: 44rpx;
}
.slogan{
  font-size: 24rpx;
  line-height: 34rpx;
  margin: 4rpx 0 0rpx;
}
.tags-box{
  margin: 0rpx 0 10rpx;
}
.tag-item{
  width: 112rpx;
  height: 36rpx;
  display: inline-block;
  line-height: 36rpx;
  text-align: center;
  font-size: 20rpx;
  /* border: 1rpx solid #292929; */
  color: #292929;
	background-color: #fff;
  border-radius: 4rpx;
  margin-right: 8rpx;
}
.bgG{
  background: linear-gradient(134deg, #AEC8F6 0%, #76A6FA 100%);
}
.company-contact-box{
  margin-top: 20rpx;
}
.contact-item{
  display: flex;
  align-items: center;
  font-size: 28rpx;
  line-height: 46rpx;
}
.contact-item image{
  width: 20rpx;
  height: 20rpx;
  margin-right: 20rpx;
}
.tabs-box{
  width: 100%;
  padding: 18rpx 40rpx;
  background: #fff;
  
box-shadow: 0px -6px 20px rgba(0, 0, 0, 0.11);
}
.tab{
  width: 116rpx;
  text-align: center;
  font-size: 28rpx;
  color: #BFBFBF;
  position: relative;
}
.tab::after{
  display: block;
  content: '';
  width: 100%;
  height: 8rpx;
  border-radius: 8rpx;
  background: #292929;
  position: absolute;
  bottom: -22rpx;
  left: 50%;
  margin-left: -58rpx;
  opacity: 0;
  transform:scaleX(0);
  transition: all .2s ease,opacity .15s ease;
}
.tab-a{
  color: #292929;
}
.tab-a::after{
  opacity: 1;
  transform: scaleX(1);
}
.tab-content-box{
  width: 100%;
}
.home-box{
  width: 100%;
  padding-bottom: 34rpx;
}
.info-box,.about-box{
  padding-bottom: 34rpx;
  border-bottom: 2rpx solid #eee;
}
.title-box{
  padding: 34rpx 40rpx;
}
.col-line{
  width: 8rpx;
  height: 36rpx;
  background: #292929;
  border-radius: 4rpx;
  margin-right: 14rpx;
}
.info-item{
  padding-left: 40rpx;
  margin-bottom: 20rpx;
  font-size: 28rpx;
  line-height: 40rpx;
  color: #1D1D1D;
}
.colG{
  width: 496rpx;
  color: #707070;
  margin-left: 56rpx;
}
.about{
  padding: 0rpx 40rpx;
}
.about text{
  font-size: 28rpx;
  color: #707070;
  line-height: 40rpx;
}

.swiper-block {
  height: 300rpx;
  width: 100%;
}
  
.swiper-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  overflow: unset;
}
.slide-image {
  height: 250rpx;
  width: 520rpx;
  border-radius: 9rpx;
  margin: 0rpx 30rpx;
  z-index: 1;
}
.active {
  transform: scale(1.14);
  transition: all 0.2s ease-in 0s;
  z-index: 20;
}
.toSite{
  text-align: center;
  font-size: 24rpx;
  color: #BFBFBF;
  margin-top: 40rpx;
}

.resources-box,.needs-box{
  width: 100%;
  min-height: 1000rpx;
  padding: 40rpx;
  background: #EFEFEF;
}
.resources-item{
  width: 100%;
  background: #fff;
  margin-bottom: 20rpx;
}
.item-top{
  width: 100%;
  padding: 32rpx 40rpx 18rpx;
  border-bottom: 2rpx solid #F0F0F0;
}
.item-top image{
  width: 196rpx;
  height: 196rpx;
  margin-right: 24rpx;
  border-radius: 8rpx;
}

.r-title{
  color: #1D1D1D;
  font-size: 34rpx;
  line-height: 44rpx;
}
.r-price{
  font-size: 28rpx;
  line-height: 40rpx;
  color: #292929;
  margin-top: 24rpx;
}
.r-tips{
  width: 370rpx;
  /* background: #EEEEEE; */
  border-radius: 8rpx;
  padding: 4rpx 10rpx;
  color: #ADADAD;
  font-size: 20rpx;
}
.btn-box{
  width: 100%;
  height: 102rpx;
  padding: 0 40rpx;
  font-size: 20rpx;
  line-height: 28rpx;
  color: #A7A7A7;
}
.btn-box-l{
	width: calc(100% - 174rpx);
}
.btn-box-l view{
	width: 98%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.toMore-btn{
  width: 164rpx;
  height: 54rpx;
  background: linear-gradient(141deg, #FFA782 0%, #000 100%);
  border-radius: 8rpx;
  font-size: 28rpx;
  font-weight: bold;
  line-height: 54rpx;
  color: #FFFFFF;
  text-align: center;
}

.company-list{
  width: 100%;
}
.company-item{
  width: 100%;
  padding: 26rpx;
  background: #fff;
  border-bottom: 2rpx solid #EEEEEE;
  margin-bottom: 20rpx;
}
.company-item .title-box{
  padding: 0;
}
.title-box .title{
  width: 430rpx;
}
.title-box .price{
  margin: 0;
  color: #FF5100;
  line-height: 40rpx;
  font-weight: 600;
}
.company-item .tags-box{
  margin: 20rpx 0;
}
.company-item .tags-box .tag-item{
  width: 112rpx;
  height: 36rpx;
  display: inline-block;
  line-height: 34rpx;
  text-align: center;
  font-size: 20rpx;
  border: 1rpx solid #292929;
  color: #292929;
  background: #fff;
  border-radius: 4rpx;
  margin-right: 8rpx;
}
.company-item .tags-box .bgG{
  border: 1rpx solid #3A9EFA;
  color: #3A9EFA;
}
.company-item .tags-box .bgO{
  border: 1rpx solid #FC9367;
  color: #FC9367;
}
.desc{
  font-size: 24rpx;
  line-height: 32rpx;
  color: #666666;
}
.company-item .btn-box{
  margin-top: 0rpx;
  font-size: 24rpx;
  color: #707070;
  padding: 0;
}
</style>