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

<template>
  <view class="content" :class="{ 'margin-bottom-80': isMar }" v-if="isShow">
    <view class="title">
      <view class="logo">
        <image
          :src="'https://kiq.xazhima.com' + info.pic_url"
          alt="" class="logo-img"
          mode="aspectFit"
        ></image>
      </view>
      <view class="name">
        {{ info.name || "-" }}
      </view>
    </view>
    <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>

    <view class="baseInfo" v-if="active === 0">
      <view class="card-title">{{ model.title }}</view>
      <view class="item-list">
        <view v-for="(item, idx) in model.item" :key="idx" class="term">
          <view class="term-name">{{ item.name }}:</view>
          <view class="term-value-group" v-if="item.name !== '网址'">
            <p
              v-for="(value, idx) in item.value"
              :key="idx"
              class="term-value-item"
              :class="{ blue: item.name == '电话' }"
              @click="callphone"
            >
              {{ value || "-" }}
            </p>
          </view>
          <view
            class="term-value-group"
            v-else
            style="
              flex-direction: row;
              align-items: center;
              padding-left: 20rpx;
            "
          >
            <view class="flex_i">
              <view>
                {{ item.value[0] || "-" }}
              </view>
              <view
                v-if="item.value[0]"
                class="copy"
                @click="copy(item.value[0])"
                style="color: #02a7f0; margin-left: 15rpx"
                >复制</view
              >
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-else-if="active === 1" class="proInfo">
      <view class="products" v-if="productList.length !== 0">
        <view
          class="product"
          @click="toDetail(item.id)"
          v-for="(item, idx) in productList"
          :key="idx"
        >
          <view class="img">
            <image
              :src="
                item.pic_url
                  ? 'https://kiq.xazhima.com' + item.pic_url
                  : '/static/enterprise/default.webp'
              "
              mode="aspectFit"
            ></image>
          </view>
          <view class="name">{{ item.name || "-" }}</view>
        </view>
      </view>
      <view v-else class="products">
        <img src="/static/nodata.svg" alt="" />
        <div style="margin: 0 auto">暂无产品信息</div>
      </view>
    </view>
    <view style="width: 100%">
      <footer-share
        style="width: 100%"
        :isCollection="true"
        :isCollectedIcon="infoObj.if_collect"
        @collectionPages="collectionPage"
        @sharePages="sharePage"
      ></footer-share>
    </view>
  </view>
</template>

<script>
import md5 from "@/common/md5.js";
import topTitle from "@/components/top-title/top-title.vue";
import footTabs from "@/components/foot-tabs/footTabs.vue";
export default {
  components: {
    "foot-tabs": footTabs,
    "top-title": topTitle,
  },
  data() {
    return {
      id: "",
      scrollTop: 0,
      titleList: ["基本信息", "产品信息"],
      active: 0,
      info: {},
      model: {},
      productList: [],
      isShow: false,
      infoObj: {},
    };
  },
  onLoad(option) {
    let id = option.id;
    this.getCompanyInfo(id);
    this.getProductInfo(id);
  },
  methods: {
    callphone(value) {
      if (this.info.phone) {
        uni.makePhoneCall({
          phoneNumber: this.info.phone,
        });
      }
    },
    change(idx) {
      this.active = idx;
    },
    toDetail(index) {
      uni.navigateTo({
        url: "/pages/enterprise/product_detail?id=" + index,
      });
    },
    getCompanyInfo(id) {
      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=info_by_id&timestamp=" +
        getApp().globalData.globalTimestamp +
        "&sign=" +
        md5Sign;
      uni.request({
        url: url,
        method: "POST",
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        data: { id, openId: getApp().globalData.open_id },
        success: (res) => {
          if (res.data.code === 200) {
            this.infoObj = res.data.data;
            let {
              name,
              pic_url,
              representative,
              found_date,
              capital,
              code,
              industry_name,
              park_name,
              work_address,
              rigiser_address,
              web_url,
              phone,
              work_range,
            } = res.data.data;
            this.info = {
              name,
              pic_url,
              representative,
              found_date,
              capital,
              code,
              industry_name,
              park_name,
              work_address,
              rigiser_address,
              web_url,
              phone,
              work_range,
            };
			this.info.capital = this.info.capital + '万元'
            this.model = {
              title: "",
              item: [
                {
                  name: "法定代表人",
                  value: [this.info.representative],
                },
                {
                  name: "成立日期",
                  value: [this.info.found_date],
                },
                {
                  name: "注册资本",
                  value: [this.info.capital],
                },
                {
                  name: "统一社会信用代码",
                  value: [this.info.code],
                },
                {
                  name: "所属行业",
                  value: [this.info.industry_name],
                },
                {
                  name: "所属园区",
                  value: [this.info.park_name],
                },
                {
                  name: "经营范围",
                  value: [this.info.work_range],
                },
                {
                  name: "地址",
                  value: [this.info.rigiser_address],
                },
                {
                  name: "网址",
                  value: [this.info.web_url],
                },
                {
                  name: "电话",
                  value: [this.info.phone],
                },
              ],
            };
            getApp().globalData.company_name = name;
            getApp().globalData.company_logo =
              "https://kiq.xazhima.com" + pic_url;
            this.isShow = true;
          }
        },
        fail: () => {
          console.log("连接失败");
        },
      });
    },
    getProductInfo(id) {
      let md5Sign = md5(
        "method=" +
          "common" +
          "&timestamp=" +
          getApp().globalData.globalTimestamp +
          "&secret=" +
          getApp().globalData.secret
      );
      let url =
        getApp().globalData.shareUrl +
        "api/api.php" +
        "?method=common&action=list&source=company_product&timestamp=" +
        getApp().globalData.globalTimestamp +
        "&sign=" +
        md5Sign;
      uni.request({
        url: url,
        method: "POST",
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        data: {
          s_company_id: id,
        },
        success: (res) => {
          if (res.data.code === 200) {
            this.productList = res.data.data.list;
            console.log(this.productList);
          }
        },
        fail: () => {
          console.log("连接失败");
        },
      });
    },
    goAuthPage() {
      uni.navigateTo({
        url: "../auth/index",
      });
    },
    collectionPage() {
      if (!getApp().globalData.user_phone) {
        this.goAuthPage();
        return;
      }
      let md5Sign = md5(
        "method=" +
          "user" +
          "&timestamp=" +
          getApp().globalData.globalTimestamp +
          "&secret=" +
          getApp().globalData.secret
      );
      let url =
        getApp().globalData.shareUrl +
        "api/api.php" +
        "?method=user&source=company&action=collect_add&timestamp=" +
        getApp().globalData.globalTimestamp +
        "&sign=" +
        md5Sign;
      uni.request({
        url: url,
        method: "POST",
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        data: {
          openId: getApp().globalData.open_id,
          source: "company",
          source_name: "企业",
          source_id: this.infoObj.id,
          source_title: this.infoObj.name,
        },
        success: (res) => {
          if (res.data.code === 200) {
            res.data.data
              ? (this.infoObj.if_collect = true)
              : (this.infoObj.if_collect = false);
            this.$forceUpdate();
            uni.showToast({
              duration: 3000,
              title: res.data.msg,
              icon: "none",
            });
          }
        },
        fail: () => {
          console.log("连接失败");
        },
      });
    },
    shareRequest() {
      let md5Sign = md5(
        "method=" +
          "user" +
          "&timestamp=" +
          getApp().globalData.globalTimestamp +
          "&secret=" +
          getApp().globalData.secret
      );
      let url =
        getApp().globalData.shareUrl +
        "api/api.php" +
        "?method=user&source=company&action=repost&timestamp=" +
        getApp().globalData.globalTimestamp +
        "&sign=" +
        md5Sign;
      uni.request({
        url: url,
        method: "POST",
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        data: {
          openId: getApp().globalData.open_id,
          source_id: this.infoObj.id,
          source: "company",
        },
        success: (res) => {
          if (res.data.code === 200) {
            console.log(res);
          }
        },
        fail: () => {
          console.log("连接失败");
        },
      });
    },
    sharePage() {
      let that = this;
      uni.showShareMenu({
        title: that.infoObj.title,
        path: "pages/enterprise/enterprise_detail?id=" + that.infoObj.id,
        success(res) {
          that.shareRequest();
        },
      });
    },
    copy(data) {
      uni.setClipboardData({
        data,
        success: function () {
          console.log("复制成功");
        },
      });
    },
  },
};
</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;
    height: 150rpx;
    padding: 0 20rpx;
    .logo {
      width: 150rpx;
      height: 100rpx;
      .logo-img {
        max-width: 100%;
        max-height: 100%;
      }
    }
    .name{
      margin-left: 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;
          }
          .flex_i {
            display: flex;
            flex-flow: row;
            justify-content: space-around;
          }
        }
      }
    }
  }
  .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: 100px;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        align-items: center;
        .img {
          width: 200rpx;
          height: 200rpx;
          image {
            width: 200rpx;
            height: 160rpx;
          }
        }
      }
    }
  }
  .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>