hlm_pl_mall_h5/pages/home/storeabout/Storeabout.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
<home-base :show="false" ><view class="div container">
    <view class="div common-header-wrap">
        <view :style="'height:'+navHeight+'px'"></view>
        <view class="common-header-holder"></view>
        <view class="common-header-fixed">
        <title-header />
        <uni-nav-bar title="店铺资料" class="common-header" left-icon="back" @clickLeft="goBack()">
        </uni-nav-bar>
    </view>
    </view>
    <view class="div header">
        <view class="div header-wrapper">
            <view class="div content-wrapper">
                <view class="div avatar">
                    <image mode="aspectFit" class="img" :src="store.store_avatar">
                </view>
                <view class="div content">
                    <view class="div store_name">{{store.store_name}}</view>
                    <view class="div follow_number">已经有{{store.store_collect}}人收藏</view>
                </view>
                <view class="div follow_panel" :class="{'active':store.is_favorate}">
                    <view class="div follow_button" @click="toggleFavorite" >
                        <text class="i iconfont" v-if="!store.is_favorate">&#xe64e;</text>
                        {{favoriteName}}
                    </view>
                </view>
            </view>
            <view class="div store_credit">
                <view class="ul">
                    <view class="li">
                        <text class="span text">{{deliverycredit_text}}</text>
                        <text class="span credit store_deliverycredit">{{deliverycredit_credit}}分</text>
                    </view>
                    <view class="li">
                        <text class="span text">{{desccredit_text}}</text>
                        <text class="span credit store_desccredit">{{desccredit_credit}}分</text>
                    </view>
                    <view class="li">
                        <text class="span text">{{servicecredit_text}}</text>
                        <text class="span credit store_servicecredit">{{servicecredit_credit}}分</text>
                    </view>
                </view>
            </view>

            <view class="div info-wrapper">
                <view class="div info-item">
                    <view class="div item price">{{ store.goods_count }}</view>
                    <view class="div item">全部商品</view>
                </view>
                <view class="div info-item">
                    <view class="div item price">{{ store.seller_name }}</view>
                    <view class="div item">店铺掌柜</view>
                </view>
            </view>
        </view>
        <view class="div shopping-about">
            <flex-line :show-border="true" @click.native="showPopup('imageVisible')">
                <text class="span">店铺二维码</text>
                <text slot="right" class="span right-icon iconfont">&#xe6e0;</text>
            </flex-line>
            <text class="a" @click="makePhoneCall(store.store_phone)" :href="'tel:'+ store.store_phone">
            <flex-line :show-border="true">
                <text class="span">商家电话</text>
                <text slot="right" class="span right-icon iconfont">&#xe6d1;</text>
            </flex-line>
            </text>
        </view>
        <view class="div store_info mt-5">
            <flex-line :show-border="true"><text class="span line-name">公司名称</text><text class="span" slot="right">{{store.store_company_name}}</text></flex-line>
            <flex-line :show-border="true"><text class="span line-name">公司地区</text><text class="span" slot="right">{{store.area_info}}</text></flex-line>
            <flex-line :show-border="true"><text class="span line-name">主营商品</text><text class="span" slot="right">{{store.store_mainbusiness}}</text></flex-line>
            <flex-line :show-border="true"><text class="span line-name">店铺QQ</text><text class="span" slot="right">{{store.store_qq}}</text></flex-line>
            <flex-line :show-border="true"><text class="span line-name">店铺旺旺</text><text class="span" slot="right">{{store.store_ww}}</text></flex-line>
        </view>
    </view>

    <uni-popup background-color="#fff" ref="imageVisible" class="middle-popup">
        <text class="h4">{{store.store_name}}</text>
        <view class="div img-new-box"><image mode="aspectFit" class="img" :src="qrcodeurl"></view>
        <view class="p">邀请好友扫一扫分享店铺给TA</view>
    </uni-popup>
</view></home-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import HomeBase from '../HomeBase'
import { mapState, mapActions } from 'vuex'
import CommonStoreFooter from '../common/CommonStoreFooter'
import { getStoreInfo } from '../../../api/homestoredetail'
import { addFavoriteStore, delFavoriteStore } from '../../../api/memberFavorite'
import flexLine from '../../flexLine'
import { env } from '../../../static/config'
export default {
  name: 'Storeabout',
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().top
  // #endif
  },
  data(){
    return {
      navHeight: 0,
      store: {
        store_id: ''
      },
      rec_goods_list: false,
      popupVisible: false, // 弹出更多
      showDot: false,
      deliverycredit_text: '',
      deliverycredit_credit: 0,
      desccredit_text: '',
      desccredit_credit: 0,
      servicecredit_text: '',
      servicecredit_credit: 0,
      qrcodeurl: ''
    }
  },
  components:{
    TitleHeader,
    HomeBase,
    flexLine,
    CommonStoreFooter
  },
  computed:{
    fontSize(){
      return getFontSize()
    },
    ...mapState({
      config: state => state.config.config,
      token: state => state.member.token,
      isOnline: state => state.member.isOnline
    }),
    favoriteName () {
      return this.store.is_favorate ? '已收藏' : '收藏'
    }
  },
  onLoad: function (option) {
    this.store.store_id=option.id ? option.id : ''
    getStoreInfo(
      this.store.store_id, this.token
    ).then((res) => {
      this.store = res.result.store_info
      this.qrcodeurl = env.API_HOST + '/index/getQrcode?url=' + encodeURIComponent(env.H5_HOST + 'pages/home/storedetail/Storedetail?id=' + this.store.store_id)
      this.rec_goods_list = res.result.rec_goods_list
      this.deliverycredit_text = res.result.store_info.store_credit.store_deliverycredit.text
      this.deliverycredit_credit = res.result.store_info.store_credit.store_deliverycredit.credit
      this.desccredit_text = res.result.store_info.store_credit.store_desccredit.text
      this.desccredit_credit = res.result.store_info.store_credit.store_desccredit.credit
      this.servicecredit_text = res.result.store_info.store_credit.store_servicecredit.text
      this.servicecredit_credit = res.result.store_info.store_credit.store_servicecredit.credit
      if (this.store.is_platform_store) {
        this.fetchConfig({}).then(
          response => {
          },
          error => {
            uni.showToast({icon:'none',title: error.message})
          }
        )
      }
    }).catch(function (error) {
    })
  },
  methods:{
    showPopup(id){
      this.$refs[id].open()
    },
    hidePopup(id){
      this.$refs[id].close()
    },
    goBack(){uni.navigateBack({delta:1})},
    ...mapActions({
      fetchConfig: 'fetchConfig'
    }),
    // 弹出更多
    popupMore () {
      if (!this.popupVisible) {
        this.popupVisible = true
      } else {
        this.popupVisible = false
      }
    },
    makePhoneCall(store_phone){
        uni.makePhoneCall({
            phoneNumber:store_phone
        })

    },
    toggleFavorite () {
      if (!this.store.is_favorate) {
        addFavoriteStore(this.store.store_id).then(
          response => {
            uni.showToast({icon:'none',title: response.message})
            this.store.is_favorate = !this.store.is_favorate
          },
          error => {
            uni.showToast({icon:'none',title: error.message})
          }
        )
      } else {
        delFavoriteStore(this.store.store_id).then(
          response => {
            uni.showToast({icon:'none',title: response.message})
            this.store.is_favorate = !this.store.is_favorate
          },
          error => {
            uni.showToast({icon:'none',title: error.message})
          }
        )
      }
    }
  }
}
</script>

<style scoped lang="scss">
    .header {overflow: hidden;position: relative;background-position: center;background-size: auto 100%;}
    .header .content-wrapper {-ms-flex-align: center;-webkit-box-align: center;align-items: center;display: -webkit-box;display: -ms-flexbox;display: flex;padding:0.8rem 0.5rem;position: relative;background: #fff}
    .header .content-wrapper .avatar {-ms-flex: 0 0 3rem;-webkit-box-flex: 0;flex: 0 0 3rem;margin-right:0.4rem;width:3rem;    border: 1px solid #efefef;}
    .header .content-wrapper .avatar .img {border-radius:0.1rem;width:3rem;height:3rem;}
    .header .content-wrapper .content {position:relative;width:8rem;height:3rem;margin-left: .5rem}
    .header .content-wrapper .content .store_name {font-size:$h2;;margin-bottom:.4rem;font-weight: 700}
    .header .content-wrapper .content .follow_number{line-height:0.7rem;font-size:$fontSize;margin-top:0.1rem;color: #999}
    .follow_panel{position:absolute;top:1rem;right:$pageSpace;}
    .follow_panel .follow_button{display:block;background:$primaryColor;border:1px solid #fff;border-radius:2.5rem;padding:0 0.4rem;line-height:1.2rem;font-size:$fontSize;color:#fff;width:2.4rem;text-align: center}
    .follow_panel .follow_button .i{line-height:1.2rem;}
    .store_credit{background: #fff;padding: 0px .5rem 2rem;}
    .store_credit .ul .li{display: inline-block;width: 33%;text-align: center}
    .store_credit .ul .li .text{font-size:$fontSize}
    .store_credit .ul .li .credit{font-size:$fontSize;margin-left: .2rem;color:$primaryColor}
    .header-wrapper{position: relative;box-shadow: 0px 4px 4px #f7f7f7;}
    .info-wrapper {
        position: absolute;
        bottom:-2rem;
        left:1.5rem;
        right:1.5rem;
        display: inline-flex;
        flex-direction: row;
        justify-content: flex-start;
        align-content: stretch;
        background-color: $primaryColor;
        border-radius: .4rem;
        z-index: 2;
    }
    .info-item {
        flex: 1;
        text-align: center;
        font-size: $fontSize;
        color:#fff;
        position: relative;
        &:first-child::after{content:'';position: absolute;top:.5rem;bottom:.5rem;right:0;border-right: 1px dashed rgba(255,255,255,.5);}
        .item{padding-top:.5rem;padding-bottom:.5rem;}
        .price{font-size:$h2;padding-bottom:0}
    }
    .shopping-about{background: #fff;padding:0 $pageSpace;padding-top:2.5rem;
        .right-icon{font-size:$mainFontSize;color:$formInputColor;}
    }
    .store_info {background: #fff;padding:0 $pageSpace;}
    .header .background {-webkit-filter: blur(0.5rem);filter: blur(0.5rem);height: 100%;left: 0;position: absolute;top: 0;width: 100%;z-index: -1;}
    .middle-popup .h4{    font-size:$h3; text-align: center; padding: .6rem;  border: 1px solid #eee; color: #444;display: block;}
    .middle-popup .img-new-box{background: #fff; padding: .75rem; margin: .5rem .65rem;height: auto}
    .middle-popup .img-new-box .img{width: 100%;height: 6rem;}
    .middle-popup .p{font-size:$fontSize;color: #777; text-align: center; padding: .4rem; border-top: 1px solid #eee;}
</style>