SteelfurnitureWeb/src/views/shops/details/index.vue

<template>
  <div class="shopDetails">
    <div class="header container">
      <img class="logo fl" :src="`${$basePath}${shopInfo.defaultImgUrl}`" />
      <div class="desc fl">
        <h3>{{ shopInfo.companyName }}</h3>
        <span class="rz">{{
          $t("page.views.shops.details.index.certified")
        }}</span>
        <div v-if="shopInfo.isFollow">
          <img src="@assets/guanzhu-2.png" />
          <span class="gz">{{
            $t("page.views.shops.details.index.alreadyConcerned")
          }}</span>
        </div>
        <div v-else @click="gz">
          <img src="@assets/guanzhu.png" />
          <span class="gz t">{{
            $t("page.views.shops.details.index.focusBusinesses")
          }}</span>
        </div>
      </div>
      <div class="fr search">
        <el-input
          class="input"
          :placeholder="
            `${$t(`inputPlaceholder`)}${$t(
              `page.views.shops.details.index.keyWord`
            )}`
          "
          prefix-icon="el-icon-search"
          v-model="searchVal"
        />
        <router-link class="fr qz" :to="`/mall/${searchVal}`">
          {{ $t("page.views.shops.details.index.searchWholeStation") }}
        </router-link>
        <div class="fr bd" @click="search">
          {{ $t("page.views.shops.details.index.searchShop") }}
        </div>
      </div>
    </div>
    <div class="navs ">
      <div class="container">
        <router-link
          class="nav "
          :to="`/shop/${sid}/products`"
          @click.native="refresh"
        >
          {{ $t("page.views.shops.details.index.home") }}
        </router-link>
        <router-link class="nav  " :to="`/shop/${sid}/profile`"
          >{{ $t("page.views.shops.details.index.companyIntroduction") }}
        </router-link>
        <router-link class="nav " :to="`/shop/${sid}/honor`"
          >{{ $t("page.views.shops.details.index.qualificationHonor") }}
        </router-link>
      </div>
    </div>
    <keep-alive>
      <router-view :shopInfo="shopInfo" :keyWord="keyWord" />
    </keep-alive>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
import user from "@/store/modules/user";
@Component
export default class extends Vue {
  private shopInfo: IAny = {};
  private searchVal = "";
  private keyWord = "";
  @Prop(String)
  private sid!: string;
  @Watch("$i18n.locale")
  @Watch("sid", { immediate: true })
  async load() {
    this.searchVal = this.keyWord = "";
    if (!this.sid) return;
    const [err, data] = await this.$post("/company/details", { id: this.sid });
    if (err) return;
    this.shopInfo = data;
  }
  search() {
    this.keyWord = this.searchVal;
    const url = `/shop/${this.shopInfo.id}/products`;
    if (this.$route.path === url) return;
    this.$router.push(url);
  }
  async gz() {
    if (!user.UserInfo)
      return this.$message.warning(`${this.$i18n.t("message.warning.login")}`);
    const [err, data] = await this.$post("/member/follow/addMemberFollow", {
      companyId: this.sid
    });
    if (err) return;
    this.shopInfo.isFollow = 1;
    this.$message.success(
      `${this.$i18n.t("page.views.shops.details.index.followSuccess")}`
    );
  }
  refresh() {
    this.shopInfo = { ...this.shopInfo };
  }
}
</script>
<style lang="scss" scoped>
.shopDetails {
  background: #fff;
  .header {
    height: 137px;
    box-sizing: border-box;
    overflow: hidden;
    padding: 30px 0;
    .logo {
      width: 142px;
      height: 80px;
    }
    .desc {
      margin-left: 20px;
      h3 {
        font-size: 18px;
        color: rgb(51, 51, 51);
        margin-bottom: 20px;
        width: 300px;
      }
      .rz {
        margin-right: 20px;
        background: rgb(253, 85, 34);
        color: #fff;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 12px;
      }
      .gz {
        // margin-left: 5px;
        font-size: 12px;
        color: rgb(51, 51, 51);
        &.t {
          cursor: pointer;
        }
      }
      div {
        display: inline-block;
      }
    }
    .search {
      margin-top: 20px;
      .input {
        width: 440px;
        height: 40px;
      }
      .fr {
        white-space: nowrap;
        width: 110px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-radius: 4px;
        cursor: pointer;
        &.bd {
          background: rgb(253, 85, 34);
          color: #fff;
          margin: 0 10px;
        }
        &.qz {
          border: 1px solid #fd5522;
          color: #fd5522;
        }
      }
    }
  }
  .navs {
    background: rgb(253, 85, 34);
    height: 40px;
    line-height: 40px;
    .nav {
      color: #fff;

      display: inline-block;

      text-align: center;
      border-left: 1px solid #ff672e;
      padding: 0 20px;
      &:last-child {
        border-right: 1px solid #ff672e;
      }
      &.router-link-exact-active {
        background: rgb(237, 68, 17);
      }
    }
  }
}
</style>