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

<template>
	<view class="div container">
		<uni-popup
            background-color="#fff"
            ref="isShowtranslateInfo"
            type="bottom"
		>
        <view class="div translate-wrapper" :style="'height:'+(screenHeight*.8)+'px'">
            <view class="div translate-header"><text class="title">保障</text><text class="iconfont close" v-on:click="closeTranslateInfo(false)">&#xe65a;</text></view>
            <view class="div translate-item">
                <view class="item" v-if="storeInfo.store_shiti"><view class="dt">实体认证</view><view class="dd">平台核实该店铺有线下实体店</view></view>
                <view class="item" v-if="storeInfo.store_qtian"><view class="dt">实物拍摄</view><view class="dd">商品图片均由线下实体店拍摄</view></view>
                <view class="item" v-if="storeInfo.store_zhping"><view class="dt">正品保障</view><view class="dd">正品保障，假一赔四</view></view>
                <view class="item" v-if="storeInfo.store_erxiaoshi"><view class="dt">急速发货</view><view class="dd">24小时内急速发货</view></view>
                <view class="item" v-if="storeInfo.store_tuihuo"><view class="dt">退货承诺</view><view class="dd">满足相应条件时，享受急速退货</view></view>
                <view class="item" v-if="storeInfo.store_shiyong"><view class="dt">试用中心</view><view class="dd">店铺接受买家试用，买家可与店铺对话沟通</view></view>
                <view class="item" v-if="storeInfo.store_xiaoxie"><view class="dt">消费者保障</view><view class="dd">买家享有消费者权益保护</view></view>
                <view class="item" v-if="storeInfo.store_huodaofk"><view class="dt">货到付款</view><view class="dd">买家享有先购物，货到在付款</view></view>
                <view class="item" v-if="storeInfo.store_avaliable_deposit > 0"><view class="dt">保证金</view><view class="dd">店铺已缴纳保证金：{{storeInfo.store_avaliable_deposit}} 元</view></view>
            </view>
        </view>
		</uni-popup>
	</view>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
import flexLine from '../../../flexLine'
export default {
  components:{
    flexLine
  },
  data () {
    return {
      navHeight: 0,
      screenHeight:0,
    }
  },


  created () {

  },

  computed: {
    ...mapState({
      // 是否显示保障浮层
      isShowtranslateInfo: state => state.goodsdetail.isShowtranslateInfo,
      storeInfo: state => state.goodsdetail.storeInfo
    })
  },

  watch: {
    isShowtranslateInfo: function (value) {
      if(value){
        this.showPopup('isShowtranslateInfo')
      }else{
        this.hidePopup('isShowtranslateInfo')
      }
    },
  },
  mounted () {
      // #ifdef  MP-WEIXIN
      this.navHeight = uni.getMenuButtonBoundingClientRect().top
      // #endif
      const res = uni.getSystemInfoSync()
      this.screenHeight = res.windowHeight
  },

  methods: {
    showPopup(id){
      this.$refs[id].open()
    },
    hidePopup(id){
      this.$refs[id].close()
    },
    ...mapMutations({
      saveTranslateState: 'saveTranslateState'
    }),

    // 关闭购物车浮层
    closeTranslateInfo (value) {
      this.saveTranslateState(value)
    },
  }
}
</script>

<style lang="scss" scoped>
	.mint-popup-bottom {
		overflow: initial;
		height: 80%;
        border-radius: 0.25rem 0.25rem 0 0;
	}
    .translate-wrapper{
        .translate-header{
            display: flex;
            align-items: center;
            padding: 1rem 0.6rem 0;
            box-sizing: border-box;
            .title{
                font-size: .8rem;
            }
            .close{
                margin-left: auto;
            }
        }
        .translate-item{
            background-color: #f5f5f5;
            border-radius: .4rem;
            padding: $pageSpace;
            margin: $pageSpace;
            .item{
                margin: .6rem 0;
                font-size: .7rem;
                .dt{
                    font-size: .7rem;
                    font-weight: bold;
                    color: #333;
                    margin-bottom: .3rem;
                }
                .dd{
                    font-size: .6rem;
                    color: #999;
                }
            }
        }
    }


</style>