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

<!-- PromotionPopup.vue -->
<template>
	<view class="div" v-if="detailInfo && detailInfo.promos && detailInfo.promos.length > 0">
		<uni-popup
			background-color="#fff"
			ref="promoPopstatus"
			type="bottom"
		>
			<view class="div detail-promotions">
				<view class="div header">
					<text class="h3">促销信息</text>

					<text class="span iconfont" v-on:click="close()">&#xe65a;</text>
				</view>
				<view class="div promotions-body">
					<view
						class="div body-list"
						v-for="(item, index) in detailInfo.promos"
						:key="index"
					>
						<text class="span name">{{ item.name }}</text>
						<text class="span title">{{ item.promo }}</text>
						<view class="div content" v-if="item.desc">
							<view class="p">{{ item.desc }}</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {}
  },
  computed: {
    ...mapState({
      promoPopstatus: state => state.goodsdetail.promoPopstatus,
      detailInfo: state => state.goodsdetail.detailInfo
    })
  },
  watch: {
    promoPopstatus: function (value) {
      if(value){
        this.showPopup('promoPopstatus')
      }else{
        this.hidePopup('promoPopstatus')
      }
    },
  },
  methods:{
    showPopup(id){
      this.$refs[id].open()
    },
    hidePopup(id){
      this.$refs[id].close()
    },
    ...mapMutations({
      changePopstatus: 'changePopstatus'
    }),

    close () {
      this.changePopstatus(false)
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-promotions {
	padding: 0 0.6rem;
	.div.header {
		position: relative;
		.h3 {
			font-size:$h3;
			color: rgba(78, 84, 93, 1);
			padding: 0;
			margin: 0;
			height:2.2rem;
			line-height:2.2rem;
			text-align: center;
			border-bottom: 0.5px solid rgba(232, 234, 237, 1);
			width: 100%;
		}
		.img {
			position: absolute;
			top:0.7rem;
			right:0.5rem;
			width:0.8rem;
			height:0.8rem;
			opacity: 1;
		}
	}
	.promotions-body {
		background: rgba(255, 255, 255, 1);
		padding: 0 0 0.6rem 0;
		.body-list {
			margin-top: 0.6rem;
			.span.name {
				background: rgba(255, 255, 255, 1);
				border-radius:0.1rem;
				font-size:$h6;
				color: $primaryColor;
				line-height:0.5rem;
				padding:0.15rem 0.3rem;
				display: inline-block;
				border: 1px solid $primaryColor;
				margin-right:0.35rem;
			}
			.span.title {
				font-size:$fontSize;
				color: rgba(71, 76, 82, 1);
				line-height:0.6rem;
			}
			.div.content {
				border-radius: 1px;
				padding:0.6rem 0 0 0;
				.p {
					padding: 0;
					margin: 0;
					font-size:$fontSize;
					color: $primaryColor;
					line-height:0.8rem;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					padding:0.6rem 0.6rem 0.5rem 0.6rem;
					background: rgba(255, 244, 244, 1);
				}
			}
		}
	}
}
</style>