hlm_pl_mall_h5/pages/home/goodsdetail/child/ProductInfo.vue

<template>
	<!-- 商品 -->
	<view class="div commodity-wrapper">
		<!-- 轮播图 -->
		<info-goods-swipe></info-goods-swipe>
		<!-- 商品信息 -->
		<info-item></info-item>


		<!-- 促销信息 -->
		<info-promotions></info-promotions>
		<!-- 代金券 -->
		<view class="div main-content">
			<flex-line v-if="voucher" :is-link="true" :show-border="true" @click.native="goNavigate('/pages/home/storedetail/StoreVoucher')">
				<text class="span">领取优惠券</text>
			</flex-line>
		</view>
		<!-- 店铺服务 -->
		<view class="main-content" v-if="detailInfo.store_service_list && detailInfo.store_service_list.length">
			<flex-line class="field-line" :is-link="true" :show-border="true" @click.native="showPopup('showService')">
				<text>店铺服务</text>
        <view class="field-line-right" slot="right">
          <view class="service-list">
              <view class="service-item" v-for="(item,index) in detailInfo.store_service_list" :key="index">
                <text class="service-icon iconfont">&#xe69d;</text>
                <text class="service-text">{{item.store_service_title}}</text>
              </view>
          </view>
        </view>
			</flex-line>
      <uni-popup background-color="#fff" ref="showService" type="bottom">
          <view class="popup-service-list">
              <view class="popup-service-item" v-for="(item,index) in detailInfo.store_service_list" :key="index">
                <view class="service-item">
                  <text class="service-icon iconfont">&#xe69d;</text>
                  <text class="service-text">{{item.store_service_title}}</text>
                </view>
                <view class="service-desc">{{item.store_service_desc}}</view>
              </view>
          </view>
      </uni-popup>
		</view>
		<!-- 购买 -->
		<info-buy></info-buy>
		<!-- 自提-->
		<info-chain></info-chain>
		<!-- 联系客服-->
		 <info-contact></info-contact>
         <!-- 店铺保障-->
         <info-translate></info-translate>
		<!-- 评论 -->
		<info-goods-review @reviewposition='reviewposition'></info-goods-review>

		<!-- 店铺信息 -->
		<view class="div goods-detail-store" @click="goNavigate('/pages/home/storedetail/Storedetail',{id:storeInfo.store_id})">
			<view class="div">
				<view class="div store-name"><image mode="aspectFit" class="img" :src="storeInfo.store_avatar">
					{{storeInfo.store_name}}

					<text class="span icon-mall" v-if="storeInfo.is_platform_store">自营</text>
				</view>
				<view class="div store-rate">
				<text class="span equal">描述相符
					<text class="em">{{storeInfo.store_credit.store_servicecredit.credit}}</text>
					<text class="i">{{storeInfo.store_credit.store_servicecredit.percent_text}}</text>
				</text>
					<text class="span equal">服务态度
					<text class="em">{{storeInfo.store_credit.store_desccredit.credit}}</text>
					<text class="i">{{storeInfo.store_credit.store_servicecredit.percent_text}}</text>
				</text>
					<text class="span equal">发货速度
					<text class="em">{{storeInfo.store_credit.store_deliverycredit.credit}}</text>
					<text class="i">{{storeInfo.store_credit.store_servicecredit.percent_text}}</text>
				</text>
				</view>
			</view>
		</view>

		<!-- 商品搭配 -->
		<accessory-item></accessory-item>
		<!-- 商品详情  -->
		<product-desc @mbBodyposition="mbBodyposition"></product-desc>
		<!-- 推荐商品  -->
		<recommend-item></recommend-item>
	</view>
</template>

<script>
import { urlencode } from '@/util/common'
import { mapState, mapMutations } from 'vuex'
import flexLine from '../../../flexLine'
import InfoGoodsSwipe from './InfoGoodsSwipe'
import InfoItem from './InfoItem'
import InfoPromotions from './InfoPromotions'
import InfoBuy from './InfoBuy'
import InfoContact from './InfoContact'
import InfoTranslate from './InfoTranslate'
import InfoChain from './InfoChain'
import InfoGoodsReview from './InfoGoodsReview'
import RecommendItem from './RecommendItem'
import AccessoryItem from './AccessoryItem'
import ProductDesc from './ProductDesc'
export default {
  data () {
    return {
	}
  },

  created () {},

  components: {
	  flexLine,
    InfoGoodsSwipe,
    InfoItem,
    InfoPromotions,
    InfoBuy,
    InfoContact,
    InfoTranslate,
	InfoChain,
    InfoGoodsReview,
    RecommendItem,
    AccessoryItem,
	ProductDesc
  },

  computed: {
    ...mapState({
      storeInfo: state => state.goodsdetail.storeInfo,
      detailInfo: state => state.goodsdetail.detailInfo,
		voucher: state => state.goodsdetail.voucher
    })
  },

  mounted () {},

  methods:{
    showPopup(id){
      this.$refs[id].open()
    },
    hidePopup(id){
      this.$refs[id].close()
    },
    goNavigate(path,query=false){
      uni.navigateTo({url:path+(query?('?'+urlencode(query)):'')})
    },
	mbBodyposition:function(top){
		this.$emit('mbBodyposition',top);
	},
	reviewposition:function(top){
		this.$emit('reviewposition',top);
	}
}
}
</script>

<style lang="scss" scoped>
	.main-content{padding:0 $pageSpace;background-color: #fff;}
.commodity-wrapper {
}
.goods-detail-store { display: block; position: relative; z-index: 1; padding: 0 $pageSpace;background: #FFF; margin-top:$modelSpace;box-shadow: 0px 4px 4px #f7f7f7; }
.goods-detail-store .store-name { display: flex;align-items: center;min-height: 0.9rem; padding: 0.5rem 0 0.25rem  0; font-size:$subFontSize; line-height: 0.9rem; color: #333; }
.goods-detail-store .store-name .img{width:100rpx;height: 100rpx;border-radius: .5rem;margin-right: .5rem;}
.goods-detail-store .store-name .icon-store { display: inline-block; width: 0.8rem; height: 0.9rem; vertical-align: top; margin-right: 0.2rem; }
.goods-detail-store .store-name .icon-store:before { content: "\e7dc"; }
.goods-detail-store .store-name .icon-mall { color: #fff;background: $primaryColor;font-size: .55rem;margin-left: .5rem;padding: .1rem .2rem;border-radius: .3rem;}
.goods-detail-store .store-rate { height: 0.7rem; padding: 0.4rem 0 0.5rem 0; border-top: dashed 1px #EEE; font-size: 0; }
.goods-detail-store .store-rate .span { display: inline-block; width: 33.33%; height: 0.7rem; font-size:$h6; line-height: 0.7rem; color: #888; }
.goods-detail-store .store-rate .span .em { display: inline-block; vertical-align: middle; font-size:$subFontSize; font-weight: 600;}
.goods-detail-store .store-rate .span .i { display: inline-block; vertical-align: middle; width: 0.7rem; height: 0.7rem; font-size:$h6; line-height: 0.7rem; font-style: normal; text-align: center; border-radius: 0.1rem;margin-left:0.2rem;}
.goods-detail-store .store-rate .span.high .em,
.goods-detail-store .store-rate .span.equal .em { color: $primaryColor;}
.goods-detail-store .store-rate .span.high .i,
.goods-detail-store .store-rate .span.equal .i { color: #FFF; background-color: $primaryColor}
.goods-detail-store .store-rate .span.low .em { color: #48CFAE;}
.goods-detail-store .store-rate .span.low .i { color: #FFF; background-color: #48CFAE;}


.service-list{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:flex;flex-wrap:wrap;padding-left:.5rem;height:1rem;line-height:1rem;}
    .service-item{display:flex;align-items:center;padding-right:.5rem;
        .service-icon{font-size:$subFontSize;color:$primaryColor;padding-right:.2rem;}
        .service-text{font-size:$subFontSize;}
    }
    .service-desc{font-size:$fontSize;color:#999;padding-left:.8rem;}
.popup-service-list{padding:.5rem $pageSpace $footerHeight $pageSpace;
  .popup-service-item{border-bottom:1px solid #eee;padding:.5rem 0;}
}
</style>