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

<template>
  <view class="content" v-if="isShow">
    <!-- 搜索框 -->
    <view class="input-box">
      <image src="/static/policy/u377.png" alt="" mode="aspectFit"/>
      <input
        type="text"
        placeholder="请输入关键词搜索"
        @confirm="searchCompany"
        v-model="searchVal"
      />
    </view>
    <view class="companys">
      <view>推荐企业</view>
      <view
        v-for="(company, index) in companyList"
        :key="index"
        @tap="toDetail(company.id)"
        class="company"
      >
        <view class="title">
          <view class="logo">
            <image
              :src="'https://kiq.xazhima.com' + company.pic_url"
              alt=""
              class="logo-img"
              mode="aspectFit"
            />
          </view>
          <view class="name">
            {{ company.name }}
          </view>
        </view>
        <view class="info">
          <view class="view">
            <view class="info_t">法定代表人</view>
            <view class="name">
              {{ company.representative }}
            </view>
          </view>
          <view class="line"></view>
          <view class="view">
            <view class="info_t">注册资本</view>
            {{ company.capital }}万元
          </view>
          <view class="line"></view>
          <view class="view">
            <view class="info_t">成立日期</view>
            {{ company.found_date }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import md5 from "@/common/md5.js";
export default {
  data() {
    return {
      companyList: [],
      isShow: false,
      searchVal: "",
      // new Array(5).fill({
      //   logo: "/static/enterprise/logo.png",
      //   name: "康拓科技有限责任公司",
      //   info: {
      //     person: "马须伦",
      //     money: "1,776,759.3万（元）",
      //     time: "1995-03-25",
      //   },
      // })
    };
  },
  onLoad() {
    this.getCompany();
  },
  methods: {
    toDetail(index) {
      uni.navigateTo({
        url: "/pages/enterprise/enterprise_detail?id=" + index,
      });
    },
    getCompany() {
      let md5Sign = md5(
        "method=" +
          "common" +
          "&timestamp=" +
          getApp().globalData.globalTimestamp +
          "&secret=" +
          getApp().globalData.secret
      );
      let url =
        getApp().globalData.shareUrl +
        "api/api.php" +
        "?method=common&source=company&action=list&timestamp=" +
        getApp().globalData.globalTimestamp +
        "&sign=" +
        md5Sign;
      let postData = {
        s_show: "1",
      };
      uni.request({
        url: url,
        method: "POST",
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        data: postData,
        success: (res) => {
          if (res.data.code === 200) {
            let list = res.data.data.list;
            console.log(res.data.data.list);
            list.forEach((e, i) => {
              let { pic_url, name, representative, capital, found_date, id } =
                e;
              list[i] = {
                pic_url,
                name,
                representative,
                capital,
                found_date,
                id,
              };
            });
            this.companyList = list;
            this.isShow = true;
          }
        },
        fail: () => {
          console.log("连接失败");
        },
      });
    },
    searchCompany() {
      let md5Sign = md5(
        "method=" +
          "common" +
          "&timestamp=" +
          getApp().globalData.globalTimestamp +
          "&secret=" +
          getApp().globalData.secret
      );
      let url =
        getApp().globalData.shareUrl +
        "api/api.php" +
        "?method=common&source=company&action=list&timestamp=" +
        getApp().globalData.globalTimestamp +
        "&sign=" +
        md5Sign;
      uni.request({
        url: url,
        method: "POST",
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        data: {
          ss_name: this.searchVal, //1.省 2.市 3.区 4.新城
        },
        success: (res) => {
          if (res.data.code === 200) {
            let list = res.data.data.list;
            console.log(list);
            list.forEach((e, i) => {
              let { pic_url, name, representative, capital, found_date, id } =
                e;
              list[i] = {
                pic_url,
                name,
                representative,
                capital,
                found_date,
                id,
              };
            });
            this.companyList = list;
          }
        },
        fail: () => {
          console.log("连接失败");
        },
      });
    },
  },
};
</script>

<style lang="scss">
.content {
  font-size: 30rpx;
  .input-box {
    width: 100%;
    height: 100rpx;
    background-color: #02a7f0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    image {
      position: absolute;
      left: 72rpx;
      width: 30rpx;
      height: 30rpx;
    }
    input {
      background-color: #ffffff;
      width: 90%;
      height: 70%;
      border-radius: 50rpx;
      padding: 3rpx;
      font-size: 26rpx;
      padding-left: 80rpx;
      box-sizing: border-box;
    }
  }
  .companys {
    margin-top: 3%;
    padding: 0 4%;
    .company {
      border-radius: 20rpx;
      box-shadow: rgba(0, 0, 0, 0.35) 0rpx 5rpx 15rpx;
      padding: 2%;
      margin: 2% 0;
      .title {
        display: flex;
        align-items: center;
        .logo {
          margin-right: 30rpx;
          width: 100rpx;
          height: 100rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          overflow: hidden;
          .logo-img {
            max-width: 100%;
          }
        }
      }
      .line {
        width: 2rpx;
        height: 70rpx;
        background: rgb(175, 186, 197);
      }
      .info {
        font-size: 19rpx;
        font-weight: 100;
        display: flex;
        text-align: center;
        justify-content: space-between;
        align-items: center;
        padding: 0 2%;
        margin-top: 2%;
        .view {
          margin-top: 2%;
          font-size: 30rpx;
          // .name {
          //   color: #02a7f0;
          // }
          .info_t {
            margin-bottom: 10rpx;
          }
        }
      }
    }
  }
}
</style>