hlm_pl_mall_h5/pages/home/pointsgoods/child/InfoItem.vue

<!-- Detailinfo.vue -->
<template>
	<view class="div ui-detail-info" v-if="detailInfo">
		<view class="div info-header ui-flex">
			<text class="h3">{{ detailInfo.pgoods_name }}</text>

		</view>

		<view class="div price">
			<text class="span current-price"><text class="i price-number">{{ detailInfo.pgoods_points }}</text>积分</text>
			<text class="span old-price">￥{{ detailInfo.pgoods_price }}</text>
		</view>

	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  data () {
    return {

      isShowDesc: false // 商品简介是否显示更多
    }
  },

  computed: {
    ...mapState({
      detailInfo: state => state.pointsgoods.detailInfo,
      currentProductId: state => state.pointsgoods.currentProductId,
      user: state => state.member.info
    })
  },

  created () {
  },

  methods: {
    ...mapMutations({
      changeIndex: 'changeIndex'
    })

  }
}
</script>

<style lang="scss" scoped>
.ui-detail-info {
	padding: 0 $pageSpace;
	background: #ffffff;
	margin-bottom: $modelSpace;
	.ui-flex {
		display: flex;
		justify-content: space-between;
		align-content: center;
		align-items: center;
		flex-basis: 100%;
		width: auto;
	}
	.info-header {
		padding-top: 0.4rem;
		.h3 {
			color: #333;
			font-size:$subFontSize;
			padding: 0;
			margin: 0;
			font-weight: normal;
			line-height:1rem;
			flex:1;
		}
		.div {
			display: flex;
			justify-content: space-between;
			align-content: center;
			align-items: center;
			.img {
				width: 1.2rem;
				height: 1.2rem;
				vertical-align: middle;
				margin-left: 0.75rem;
				flex-shrink: 0;
			}
		}
		.span {
			width: 1.5rem;
			height: 0.9rem;
			line-height: 0.9rem;
			text-align: center;
			background: $primaryColor;
			border-radius: 0.1rem;
			font-size:$fontSize;
			color: rgba(255, 255, 255, 1);
			display: inline-block;
			margin-right: 0.5rem;
		}
	}

	.price {
		padding-bottom: 0.4rem;
		display: flex;
		align-items: baseline;
		.span {
			display: block;
			font-weight: normal;
			&.current-price {
				font-size:$fontSize;
				color: $primaryColor;
				line-height: 1rem;
				.price-number{font-size:$h1;font-weight: bold;margin-right:.2rem;}
			}
			&.num{
				font-size:$fontSize;
				color:#666;
			}
			&.old-price {
				font-size:$fontSize;
				color: rgba(164, 170, 179, 1);
				line-height: 1rem;
				text-decoration: line-through;
				margin-left: 0.3rem;
			}
		}
	}

	.info-sub {
		border-bottom: 0.5px solid #e8eaed;
		padding-bottom: 0.75rem;
		.p {
			padding: 0;
			margin: 0;
			color: $primaryColor;
			font-size:$fontSize;
			&.ui-clip {
				display: -webkit-box;
				overflow: hidden;
			}
		}
		.img {
			width: 0.4rem;
			height: 0.2rem;
			margin-left: 0.5rem;
		}
	}

}
</style>