konggang-city-miniprogram/pages/enterprise/enterprise_detail.vue

<template>
  <div class="content" :class="{ 'margin-bottom-80': isMar }">
    <div class="title">
      <div class="logo">
        <img :src="company.logo" alt="" />
      </div>
      <div class="name">
        {{ company.name }}
      </div>
    </div>
    <view class="enterprise-item-box">
      <view
        v-for="(item, idx) in titleList"
        :key="idx"
        :class="{ active: active === idx }"
        class="enterprise-item-name"
        @click="change(idx)"
      >
        {{ item }}
      </view>
    </view>
    <div class="baseInfo" v-if="active === 0">
      <div class="card-title">{{ model.title }}</div>
      <div class="item-list">
        <div v-for="(item, idx) in model.item" :key="idx" class="term">
          <div class="term-name">{{ item.name }}:</div>
          <div class="term-value-group">
            <p
              v-for="(value, idx) in item.value"
              :key="idx"
              class="term-value-item" :class="{'blue':item.name == '电话'}"
            >
              {{ value }}
            </p>
          </div>
        </div>
      </div>
    </div>
    <div v-else-if="active === 1" class="proInfo">
      <div class="products">
        <div class="product" @click="toDetail(1)">
          <div class="img">
            <img src="/static/enterprise/product.jpg">
          </div>
          <div class="name">
            硬件销售
          </div>
        </div>
        <div class="product">
          <div class="img">
            <img src="/static/enterprise/product.jpg">
          </div>
          <div class="name">
            硬件销售
          </div>
        </div>
        <div class="product">
          <div class="img">
            <img src="/static/enterprise/product.jpg">
          </div>
          <div class="name">
            硬件销售
          </div>
        </div>
      </div>
    </div>
    <div style="width: 100%">
      <footer-share
        style="width: 100%"
        :isCollection="true"
        @collectionPages="collectionPage"
        @sharePages="sharePage"
      ></footer-share>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: {
        title: "",
        item: [
          {
            name: "法定代表人",
            value: ["马须伦"],
          },
          {
            name: "成立日期",
            value: ["2017-11-14"],
          },
          {
            name: "注册资本",
            value: ["1,776,759.3万"],
          },
          {
            name: "统一社会信用代码",
            value: ["914403000758402311"],
          },
          {
            name: "所属行业",
            value: ["航空运输业"],
          },
          {
            name: "所属园区",
            value: ["华潮科技产业园"],
          },
          {
            name: "经营范围",
            value: ["华潮科技产业园"],
          },
          {
            name: "经营范围",
            value: [
              "一、提供国内、地区和国际定期及不定期航空客、货、邮、行李运输服务；二、提供通用航空服务；三、提供航空器维修服务；四、经营国内外航空公司的代理业务；五、提供航空配餐服务（仅限分支机构经营）；六、进行其他航空业务及相关业务，包括为该等业务进行广告宣传；",
            ],
          },
          {
            name: "地址",
            value: ["咸阳市渭城区北杜镇（近208省道）"],
          },
          {
            name: "网址",
            value: ["http://www.sundowa.com"],
          },
          {
            name: "电话",
            value: ["029-85951688"],
          },
        ],
      },
      id: "",
      scrollTop: 0,
      titleList: ["基本信息", "产品信息"],
      active: 0,
      company: {
        logo: "/static/enterprise/logo.png",
        name: "康拓科技有限责任公司",
      },
    };
  },
  onLoad(option) {
    let id = option.id;
  },
  methods: {
    collectionPage() {
      console.log("已收藏");
    },
    sharePage() {
      console.log("分享");
      uni.showShareMenu({
        title: "园区XXX",
        path: "pages/park/park_detail",
        success(res) {
          console.log(res);
        },
      });
    },
    change(idx){
      this.active = idx
    },
    toDetail(index) {
      uni.navigateTo({
        url: "/pages/enterprise/product_detail?id=" + index,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  padding: 4%;
  font-size: 30rpx;
  .blue{
      color: #02a7f0;
    }
  .title {
    display: flex;
    align-items: center;
    border-radius: 10rpx;
    margin-bottom: 50rpx;
    box-shadow: rgba(0, 0, 0, 0.35) 0rpx 5rpx 15rpx;
    .logo {
      image {
        width: 200rpx;
        height: 100rpx;
        margin: 0 30rpx;
      }
    }
  }
  .baseInfo {
    margin-bottom: 50rpx;
    .card-title {
      padding: 20rpx 20rpx 0rpx 20rpx;
      font-weight: 600;
    }
    .item-list {
      margin-left: 20rpx;
      display: flex;
      flex-direction: column;

      .term {
        display: flex;
        .term-name {
          font-size: 27rpx;
          width: 30%;
          display: flex;
          margin: 20rpx;
          color: #7f7f7f;
        }
        .term-value-group {
          flex: 1;
          display: flex;
          flex-direction: column;
          font-size: 27rpx;
          .term-value-item {
            margin: 20rpx;
          }
        }
      }
    }
  }
  .proInfo{
    font-size: 25rpx;
    .products{
      width: 100%;
      display: flex;
      padding: 4%;
      flex-wrap: wrap;
      .product{
        margin: 2%;
        padding: 2%;
        border-radius: 30rpx;
        box-shadow: rgba(0, 0, 0, 0.35) 0rpx 5rpx 15rpx;
        width: 40%;
        height: 30%;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        align-items: center;
        img{
          width: 250rpx;
          height: 200rpx;
        }
      }
    }
  }
  .enterprise-item-box {
    display: flex;
    justify-content: space-evenly;
    margin: 0 20rpx;
    margin-top: 10rpx;
    .enterprise-item-name {
      padding-bottom: 10rpx;
      font-size: 27rpx;
    }
    .active {
      font-weight: 600;
      border-bottom: 7rpx solid #02a7f0;
    }
  }
}
.margin-bottom-80 {
  margin-bottom: 80rpx;
}
</style>