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="" />
      <input
        type="text"
        placeholder="请输入关键词搜索"
        @confirm="searchCompany"
        v-model="searchVal"
      />
    </view>
    <view class="companys">
      <view>推荐企业</view>
      <view
        class="company"
        v-for="(company, index) in companyList"
        :key="index"
        @tap="toDetail(company.id)"
      >
        <view class="title">
          <view class="logo">
            <img :src="'https://kiq.xazhima.com' + company.pic_url" alt="" />
          </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 = {
        page: 1,
        page_size: 15,
      };
      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;
            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_content_text: this.searchVal, //1.省 2.市 3.区 4.新城
        },
        success: (res) => {
          console.log(res.data);
          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: 40rpx;
      height: 40rpx;
    }
    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 {
          image {
            width: 100rpx;
            height: 100rpx;
            margin-right: 30rpx;
          }
        }
      }
      .line {
        width: 3rpx;
        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%;
          .name {
            color: #02a7f0;
          }
          .info_t {
            margin-bottom: 10rpx;
            font-size: 25rpx;
          }
        }
      }
    }
  }
}
</style>