hlm_pl_mall_h5/pages/home/storedetail/Storedetail.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
    <home-base :show="false" ><view class="div">
	<store-special-index v-show="special && special['store/index'+store.store_id]" :page-path="'store/index'" :item-id="''" v-if="store.store_name !=''" :store="store"></store-special-index>
        <view class="div container" v-show="!special || !special['store/index'+store.store_id]">
			<common-store-header v-if="!special || !special['store/index'+store.store_id] || special['store/index'+store.store_id]['editablePage']['editable_page_theme_config']['if_show_header']==1" :store="store"></common-store-header>
            <!--直播start-->
            <view class="div live-wrapper"  v-if="store.live_apply_info" @click="goLive(store.live_apply_info.live_apply_id)">
                <view class="div box-wrapper v live-back-wrapper">
                    <image mode="aspectFit" :src="store.live_apply_info.live_apply_cover_image_url" class="img live-back-image" />
                    <view class="div box-wrapper v live-back-cover"></view>
                </view>
                <view class="div live-title">{{store.live_apply_info.live_apply_name}}</view>
                <view class="div box-wrapper h" style="align-items: flex-end">
                    <view class="div box-wrapper v left">
                        <view class="div box-wrapper v live-image">
                            <video v-if="store.live_apply_info.live_apply_cover_video" :src="store.live_apply_info.live_apply_cover_video_url" muted="muted" autoplay="autoplay" loop="loop" />
                            <image mode="aspectFit" class="img" v-else :src="store.live_apply_info.live_apply_cover_image_url">
                        </view>
                    </view>
                    <view class="div box-wrapper v right">
                        <view class="div box-wrapper v live-info">

                            <view class="div box-wrapper v live-desc">
                                <text class="span live-count">{{store.live_apply_info.live_apply_view_count}}次观看</text>
                                <image mode="aspectFit" src="../../../static/image/live/live-state.png" class="img live-icon" />
                            </view>
                        </view>
                        <view class="div goods-list">
                            <view class="div box-wrapper h" v-if="store.live_apply_info.goods_list && store.live_apply_info.goods_list.length">
                                <image mode="aspectFit" :src="store.live_apply_info.goods_list[0].goods_image_url" class="img goods-image" />
                                <view class="div box-wrapper v goods-wrapper">
                                    <view class="div box-wrapper h goods-price">
                                        <text class="span">直播价：</text>
                                        <text class="span currency">￥</text>
                                        <text class="span price">{{store.live_apply_info.goods_list[0].goods_price}}</text>
                                    </view>
                                    <view class="div goods-btn">点击查看</view>
                                </view>
                            </view>
                        </view>

                    </view>
                </view>
                <view class="div live-btn-text">观看直播</view>
            </view>
            <!--直播end-->
            <swiper class="mt-5" v-if="store.mb_sliders && store.mb_sliders.length" :autoplay="true" v-bind:style="getBannerStyle" :indicator-dots="isShowIndicators">
                <swiper-item v-for="(item, index) in store.mb_sliders" :key="index">
                    <image mode="aspectFit" class="img" :style="getBannerStyle" :src="item.imgUrl" @click="goAd(item)">
                </swiper-item>
            </swiper>
            <store-product-list
                    :items="rec_goods_list"
                    v-if="rec_goods_list && rec_goods_list.length > 0"
            ></store-product-list>
            <common-store-footer :store_id="store.store_id" v-if="!special || !special['store/index'+store.store_id] || special['store/index'+store.store_id]['editablePage']['editable_page_theme_config']['if_show_footer']==1"></common-store-footer>
        </view>
    </view></home-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import { urlencode } from '@/util/common'
import HomeBase from '../HomeBase'
import { mapState, mapActions } from 'vuex'
import StoreSpecialIndex from '../storespecial/Index'
import CommonStoreHeader from '../common/CommonStoreHeader'
import CommonStoreFooter from '../common/CommonStoreFooter'
import { getStoreInfo } from '../../../api/homestoredetail'
import { getChatCount } from '../../../api/memberInstantMessage'
import StoreProductList from './StoreProductList'
import HeaderMore from '../../HeaderMore'
export default {
  name: 'Storedetail',
  data () {
    return {
      store: {
        store_id: '',
        store_name:''
      },
      rec_goods_list: false,
      popupVisible: false, // 弹出更多
      showDot: false
    }
  },
  components:{
    HomeBase,
    HeaderMore,
    StoreProductList,
	CommonStoreHeader,
    CommonStoreFooter,
    StoreSpecialIndex
  },
  computed:{
    fontSize(){
      return getFontSize()
    },
    ...mapState({
      special: state => state.home.special,
      config: state => state.config.config,
      token: state => state.member.token,
      isOnline: state => state.member.isOnline
    }),
    getBannerStyle: function () {
      const res = uni.getSystemInfoSync()
      var width = res.windowWidth
      var height = res.windowHeight
      let itemWidth = width
      let itemHeight = width * (1 / 4)
      return "width:"+itemWidth +"px;height:"+itemHeight +"px"
    },
    isShowIndicators () {
      if (this.store.mb_sliders && this.store.mb_sliders.length > 1) {
        return true
      }
      return false
    },
  },
  onShareAppMessage(res) {
      return {
        title: this.store.store_name,
        path: "/pages/home/storedetail/Storedetail?id="+this.store.store_id,
        imageUrl:this.store.store_avatar
      }
    },
  onShareTimeline(res) {
      return {
        title: this.store.store_name,
        path: "/pages/home/storedetail/Storedetail?id="+this.store.store_id,
        imageUrl:this.store.store_avatar
      }
    },
  onLoad: function (option) {
    this.store.store_id=option.id ? option.id : option.scene
    getStoreInfo(
      this.store.store_id, this.token
    ).then((res) => {
      this.store = res.result.store_info
      uni.setNavigationBarTitle({
      	title: this.store.store_name
      })
      this.rec_goods_list = res.result.rec_goods_list
      if (this.store.is_platform_store) {
        this.fetchConfig({}).then(
          response => {
          },
          error => {
            uni.showToast({icon:'none',title: error.message})
          }
        )
      }
    }).catch(function (error) {
    })
    if (this.isOnline) {
      getChatCount().then(res => {
        if (res.result) {
          if (!this.showDot) {
            this.showDot = {}
          }
          this.showDot['chat'] = true
        }
      })
    }
  },
  methods:{
    goNavigate(path,query=false){
      uni.navigateTo({url:path+(query?('?'+urlencode(query)):'')})
    },

    showPopup(id){
      this.$refs[id].open()
    },
    hidePopup(id){
      this.$refs[id].close()
    },
    ...mapActions({
      fetchConfig: 'fetchConfig'
    }),
    goLive (live_apply_id) {
      uni.navigateTo({ url: '/pages/member/live/LiveDetail'+'?'+urlencode( { 'live_apply_id': live_apply_id } )})
    },
    goAd (item) {
      if (item.type === 2) {
        uni.navigateTo({ url: '/pages/home/goodsdetail/Goodsdetail'+'?'+urlencode( { goods_id: item.link } )})
      } else {
        uni.navigateTo({ url:item.link})
      }
    },
    // 弹出更多
    popupMore () {
      if (!this.popupVisible) {
        this.popupVisible = true
      } else {
        this.popupVisible = false
      }
    },
  }

}
</script>

<style scoped lang="scss">
    .box-wrapper{box-sizing: border-box; display: flex;align-content: flex-start; flex-shrink: 0;}
    .box-wrapper.v{-webkit-box-orient: vertical; flex-direction: column; }
    .box-wrapper.h{-webkit-box-orient: horizontal; flex-direction: row;}
    .live-title{position: relative; display: block; font-size:$h2; width: 16rem; line-height: .75rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;margin-bottom:.5rem;}
    .box-wrapper .live-desc{position: relative; height: .75rem; }
    .box-wrapper .live-count{position: absolute; display: block;  font-size:$fontSize;color:#55595F; left: 0px; top: 0px; height: .75rem; margin-left: 2.76rem; line-height: .75rem; }
    .box-wrapper .live-icon{display: flex; width: 2.46rem; height: .75rem;}
    .box-wrapper .live-btn-text{position: relative; display: block;  font-size:$fontSize; color: rgb(255, 52, 103);}
    .box-wrapper .left{position: relative; width: 5.6rem; height: 5.6rem;}
    .box-wrapper .right{position: relative; flex: 1 1 0%; -webkit-box-flex: 1; margin-left: .5rem;}
    .box-wrapper .live-info{position: relative;  margin-bottom: .5rem;}
    .box-wrapper .live-image{position: relative;  height: 5.6rem; width: 5.6rem; border-radius: .3rem; overflow: hidden;background:#000}
    .box-wrapper .live-image .img{width:100%;height: 100%}
    .box-wrapper .live-image video{width:100%;height: 100%}
    .box-wrapper.live-back-wrapper{position: absolute;  left: 0px; top: 0px; bottom:0;width: 100%; overflow: hidden;}
    .box-wrapper .live-back-image{display: flex; width: 100%; height: 100%; transform: scale(4); object-fit: cover;}
    .box-wrapper .live-back-cover{position: absolute;  left: 0px; top: 0px; right: 0px; bottom: 0px; background-color: rgba(255, 255, 255, 0.2);}
    .live-wrapper{position: relative;  width: 100%; padding: .6rem; overflow: hidden;box-sizing: border-box;display: flex;flex-direction: column;align-items: center;}
    .live-btn-text{position: relative;z-index: 2;background: $primaryGradualColor;color:#fff;height: 1.5rem;line-height: 1.5rem;border-radius: 1rem;text-align: center;width:10rem;font-size:$subFontSize;margin:.5rem auto 0 auto;}
    .goods-list{background: #f1f1f1;border-radius:.4rem;overflow: hidden;width:10rem;
        .goods-image{width:4rem;height: 4rem;}
        .goods-wrapper{flex:1;justify-content: center;align-items: center;
            .goods-price{font-size:$fontSize;align-items: center;margin-bottom:.5rem;font-weight: 700;
                .currency{color:$primaryColor}
                .price{color:$primaryColor;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 3rem;}
            }
        }
        .goods-btn{border:1px solid $primaryColor;width:4rem;border-radius:1rem;height:1rem;line-height:1rem;color: $primaryColor;font-size:$fontSize;text-align: center;}
    }
</style>