mall-web-ssr/components/store/home/EnterpriseInfo.vue

<template>
  <div id="recommend-fragment-self">
    <div class="recommend-product">
      <ul class="main-list clearfix">
        <li>
          <div>
            <div class="list">
              <div class="information-list">
                <div>主营产品&nbsp;:</div>
                <div v-if="storeInfo.description" :title="storeInfo.description">{{storeInfo.description | introduceFilter}}</div>
                <div v-else>—</div>
              </div>
              <div class="information-list">
                <div>应用领域&nbsp;:</div>
                <div v-if="storeInfo.storeApplication" :title="storeInfo.storeApplication">{{storeInfo.storeApplication | introduceFilter}}</div>
                <div v-else>—</div>
              </div>
              <div class="information-list">
                <div>电话&nbsp;:</div><div>{{storeInfo.enterprise.enTel || '—'}}</div>
              </div>
              <div class="information-list">
                <div>传真&nbsp;:</div><div>{{storeInfo.enterprise.enFax || '—'}}</div>
              </div>
              <div class="information-list">
                <div>手机&nbsp;:</div><div>{{storeInfo.enterprise.enPhone || '—'}}</div>
              </div>
              <div class="information-list">
                <div>微信&nbsp;:</div><div>{{storeInfo.enterprise.enWeixin || '—'}}</div>
              </div>
              <div class="information-list" style="padding-bottom: 10px;">
                <div>Q Q&nbsp;:</div><div>{{storeInfo.enterprise.enQQ || '—'}}</div>
              </div>
              <!--<div class="information-list">
                <div>资质审核&nbsp;:</div><div>营业执照&nbsp;&nbsp;<img src="/images/store/home/logo-qualification.jpg"></div>
              </div>-->
            </div>
            <div class="introduce">
              <div><h4>企业简介</h4></div>
              <p class="intro-content" v-if="storeInfo.enterprise.description">
                <span class="info" v-text="getIntro(storeInfo.enterprise.description)"></span>
                <span class="look" @click="dialogVisible = true" v-if="showMore">查看更多 <img src="/images/store/home/angle-right.png" style="margin-top:-2px;"></span>
              </p>
              <p v-else class="empty-introduce">暂无简介</p>
            </div>
            <div class="introduce qualification">
              <div><h4 class="prof">资质证明</h4><span @click="dialogCertificate = true">查看 <img src="/images/store/home/angle-right.png"></span></div>
              <!--<qualification-certificate></qualification-certificate>-->
            </div>
            <div class="product-show">
              <recommend-list></recommend-list>
            </div>
          </div>
        </li>
        <li>
          <div style="width: 962px; margin-left: 3px;">
            <!--<recommend-list></recommend-list>-->
            <commodity-list></commodity-list>
          </div>
        </li>
      </ul>
      <div class="remind-area">
        <img src="/images/store/store-reminds.png" alt="">
        所有报价、库存信息的真实性及准确性均由店铺负责，如有疑问请点击
        <a @click="goLink" class="link-seller">联系卖家</a>
      </div>
    </div>
    <!--企业简介-->
    <el-dialog class="dialog-description"
               :visible.sync="dialogVisible"
               size="tiny">
      <div>
        <div class="header">
          <span><img src="/images/store/home/blue.png">企业简介</span>
          <span class="close" @click="dialogVisible = false">&times;</span>
        </div>
        <div class='content'>
          <p v-if="storeInfo.enterprise.description">{{storeInfo.enterprise.description}}</p>
          <p v-else class="empty-introduce">暂无简介</p>
        </div>
      </div>
    </el-dialog>
    <!--资质证明-->
    <el-dialog class="dialog-description certificate"
               :visible.sync="dialogCertificate"
               size="tiny">
      <div>
        <div class="header">
          <span><img src="/images/store/home/blue.png">资质证明</span>
          <span class="close" @click="dialogCertificate = false">&times;</span></div>
        <div class="content" style="height: 270px; width: 1070px; padding: 0 50px;"><qualification-certificate></qualification-certificate></div>
      </div>
    </el-dialog>
    <!--联系卖家-->
    <link-saler-box
      :tel="tel"
      v-if="showLinkBox"
      @cancelAction="showLinkBox = false">
    </link-saler-box>
  </div>
</template>
<script>
  import Buy from '~components/common/buyOrCar/buyComponent.vue'
  import RecommendList from './RecommendList.vue'
  import CommodityList from './CommodityList.vue'
  import QualificationCertificate from './QualificationCertificate.vue'
  import LinkSalerBox from '~components/common/LinkSalerBox.vue'
  export default {
    name: 'product-recommend-self',
    data () {
      return {
        dialogVisible: false,
        dialogCertificate: false,
        showMore: false,
        showLinkBox: false
      }
    },
    components: {
      RecommendList,
      Buy,
      CommodityList,
      QualificationCertificate,
      LinkSalerBox
    },
    computed: {
      commodities () {
        return this.$store.state.shop.recommend.products.data
      },
      storeInfo () {
        return this.$store.state.shop.storeInfo.store.data
      }
    },
    filters: {
      introduceFilter: function (title) {
        if (title === '') {
          return title
        }
        let len = 0
        let index = 0
        for (let i = 0; i < title.length; i++) {
          if (index === 0 && title.charAt(i).charCodeAt(0) > 255) {
            len = len + 2
          } else {
            len++
          }
          if (len > 20) {
            index = i
            break
          }
        }
        if (index > 0) {
          return title.substring(0, index) + '...'
        } else {
          return title
        }
      }
    },
    methods: {
      // 店铺简介
      getIntro (text) {
        let realLength = this.baseUtils.getRealLen(text)
        if (realLength > 495) {
          this.showMore = true
          text = this.baseUtils.cutOutString(text, 495) + '...'
        } else {
          this.showMore = false
        }
        return text
      },
      // 联系卖家
      goLink: function () {
        this.baseUtils.goLinkUser(this, this.storeInfo.enUU)
      },
      buyNow: function (isBuy, item) {
        if (!this.$store.state.option.user.logged) {
          this.$http.get('/login/page', {params: {returnUrl: window.location.href}}).then(response => {
            if (response.data) {
              this.$router.push('/auth/login')
            }
          })
        } else {
          if (item) {
            if (isBuy) {
              this.$http.post('trade/order/buyNow', [{
                uuid: item.comUuid,
                batchCode: item.batchCode,
                number: item.minBuyQty,
                storeid: item.storeId,
                storeUuid: item.storeUuid,
                currencyName: item.currency,
                minPackQty: item.minPackQty ? item.minPackQty : item.minBuyQty
              }])
                .then(response => {
                  //        window.location.href = '/user#/order/pay/' + this.enidfilter(response.data.orderid)
                  if (response.data.success) {
                    if (response.data.message) {
                      this.$message({
                        message: response.data.message,
                        type: 'success'
                      })
                      let _self = this
                      window.setTimeout(function () {
                        window.location.href = '/user#/order/pay/' + _self.enidfilter(response.data.data.orderid)
                      }, 1000)
                    } else {
                      window.location.href = '/user#/order/pay/' + this.enidfilter(response.data.data.orderid)
                    }
                  } else {
                    if (response.data.data && response.data.data.unvailable === 1) {
                      this.$message.error('产品信息已失效，请刷新界面')
                    } else {
                      this.$message.error(response.data.message)
                    }
                  }
                }, err => {
                  console.log(err)
                  if (item.minBuyQty > item.reserve) {
                    this.$message.error('商品' + item.code + '的库存已经不满足起订量')
                  }
                })
            } else {
              // this.$store.dispatch('user/addCar', {uuid: item.uuid, batchCode: item.batchCode, number: item.minBuyQty})
              this.$http.post('trade/cart/add', {
                uuid: item.comUuid,
                batchCode: item.batchCode,
                number: item.minBuyQty,
                storeid: item.storeId,
                storeUuid: item.storeUuid,
                currencyName: item.currency,
                minPackQty: item.minPackQty ? item.minPackQty : item.minBuyQty
              })
                .then(response => {
                  if (response.data.success) {
                    if (response.data.message) {
                      this.$message({
                        message: '添加购物车成功，但商品信息有更新',
                        type: 'success'
                      })
                    } else {
                      this.$message({
                        message: '添加购物车成功',
                        type: 'success'
                      })
                    }
                  } else {
                    this.$message.error(response.data.message)
                  }
                })
            }
          }
        }
      },
      enidfilter: function (str) {
        if (str) {
          let encryptStr = '' // 最终返回的加密后的字符串
          // 产生三位随机数
          let num = ''
          for (let i = 0; i < 3; i++) {
            num += Math.floor(Math.random() * 10)
          }
          encryptStr += num // 产生3位随机数

          // 16位加密
          let tempspit = ''
          let strspit = str.toString().toLowerCase()
          if (strspit.match(/^[-+]?\d*$/) === null) { // 非整数字符，对每一个字符都转换成16进制，然后拼接
            /**
             * Unicode汉字、英文字母、数字的unicode范围
             *汉字：[0x4e00,0x9fa5]（或十进制[19968,40869]）
             *数字：[0x30,0x39]（或十进制[48, 57]）
             *小写字母：[0x61,0x7a]（或十进制[97, 122]）
             *大写字母：[0x41,0x5a]（或十进制[65, 90]
             * 'a'的Unicode编码：'&#97;',charCodeAt()的值是97
             * '码'的Unicode编码：'\u7801', new String('码').charCodeAt()的值是30721，30721的16进制表示是7801
             */
            let s = strspit.split('')
            for (let i = 0; i < s.length; i++) {
              s[i] = s[i].charCodeAt() // 先转换成Unicode编码
              s[i] = s[i].toString(16)
              // 因为在服务器是每两位当做一个字符进行解析的，所以这里每个字符的Unicode编码范围必须在0——255之间。数字和大小写满足该要求，特殊字符则不一定，如果后续有特殊字符的要求，需要重写编码器和解码器
              if (s[i].length === 1) {
                s[i] = '0' + s[i]
              }
              tempspit = tempspit + s[i]
            }
            tempspit = tempspit + '{' + 1 // 1代表字符
          } else { // 数字直接转换成16进制
            strspit = parseInt(strspit)
              .toString(16)
            tempspit = strspit + '{' + 0 // 0代表纯数字
          }

          let temp = tempspit.split('{') // 对要加密的字符转换成16进制
          let numLength = temp[0].length // 转换后的字符长度
          numLength = numLength.toString(16) // 字符长度换算成16进制
          if (numLength.length === 1) { // 如果是1，补一个0
            numLength = '0' + numLength
          } else if (numLength.length > 3) { // 转换后的16进制字符长度如果大于2位数，则返回，不支持
            return ''
          }
          encryptStr += numLength
          if (temp[1] === '0') {
            encryptStr += 0
          } else if (temp[1] === '1') {
            encryptStr += 1
          }
          encryptStr += temp[0]
          if (encryptStr.length < 20) { // 如果小于20位，补上随机数
            // 产生三位随机数
            let numtwo = ''
            for (let i = 0; i < 20 - encryptStr.length; i++) {
              numtwo += Math.floor(Math.random() * 10)
            }
            let ran = numtwo // 产生3位随机数
            encryptStr += ran
          }
          return encryptStr
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  #recommend-fragment-self {
    min-width: 1190px;
    background: #ece9ec;
    margin:-18px 0px 0 0px;
    .recommend-product {
      position: relative;
      width: 1190px;
      margin: 0 auto;
      padding-bottom: 50px;
      .main-list {
        width: 100%;
        /*overflow: hidden;*/
        > li {
          position: relative;
          float: left;
          width: 962px;
          margin-left: 9px;
          &:first-child {
            width: 218px;
            /*height: 356px;*/
            /*background: #fff;*/
            margin: -5px 0 0 1px;
            border-radius: 5px;
           .list{
             margin-top: -20px;
             height: 170px;
             border-radius: 5px;
             background: #fff;
            .information-list {
              font-size: 12px;
              color: #333;
              margin-bottom: 3px;
              /*background: #fff;*/
            &:first-child{
               /*padding-top: 10px;*/
             }
            div:first-child {
              width: 72px;
              text-align: right;
              line-height: 20px;
            }
            div:last-child {
              width: 158px;
              line-height: 20px;
              padding: 0px 0px 0px 6px;
            }
            }
            .information-list > div {
    display: table-cell;
  }
           }
            .introduce {
              margin-top: 15px;
              width: 100%;
              height: 336px;
              font-size: 12px;
              line-height: 15px;
              color: #333;
              background: #fff;
              border-radius: 5px;
              p{
                span.info{
                  font-size: 12px;
                  color: #333;
                  word-break: break-all;
                  word-wrap:break-word;
                }
                span.look {
                  color: #3c7df5;
                  cursor: pointer;
                }
              }
              div{
                overflow: hidden;
                height: 35px;
                h4 {
                  float: left;
                  background: url(/images/store/home/detail1.png) no-repeat 15% 10%;
                  font-size: 14px;
                  padding: 0 0 5px 30px;
                  margin:10px 0;
                }
                h4.prof {
                  background: url("/images/store/home/prof.png") no-repeat 15% 10%;
                }
                span{
                  float: right;
                  margin-top: 10px;
                  padding-right: 10px;
                  font-size: 12px;
                  color: #3c7df5;
                  cursor: pointer;
                  img{
                    margin-top: -3px;
                  }
                }
              }
              p {
                margin: -7px 0px 0px 9px;
                text-indent: 2em;
                width: 200px;
                line-height: 19px;
                height: 308px;
                overflow: hidden;
              }
              .empty-introduce{
                text-align: center;
                line-height: 153px;
                color: #666;
              }
            }
            .qualification {
              height: 35px;
              min-height: 35px;
            }
            .product-show{
              margin-top: 8px;
            }
          }
        }
      }
    }
  }

</style>