hlm_pl_mall_h5/pages/home/pointsgoods/IndexProdItem.vue

<template>
    <view class="div main-content">
        <view class="div goods-item" @click="goPointsgoodsDetail(item.pgoods_id)">
            <view class="div goods-img">
                <view class="div img-content">
                    <image mode="aspectFit" class="img" :src="item.pgoods_image" />
                </view>
            </view>
            <view class="div info-wrap">
                <view class="div name-wrap">
                    <view class="div goods-name">
                        {{item.pgoods_name}}
                    </view>
                </view>
                <view class="div bottom-wrapper">
                    <view class="div lineheight-clear">
                        <view class="div discount-price">
                                    <text class="span text-content unit color-base-text">
                                        <text class="span">{{item.pgoods_points}}</text>
                                    </text>
                            <text class="span text-content unit color-base-text font-size-tag">
                                        <text class="span">积分</text>
                                    </text>
                        </view>
                    </view>
                    <view class="div pro-info">
                        <view class="div font-size-activity-tag color-tip">
                            库存{{item.pgoods_storage}}
                        </view>
                        <view class="div sale font-size-activity-tag color-tip"></view>
                    </view>
                </view>
            </view>
        </view>

    </view>
</template>

<script>
import { urlencode } from '@/util/common'
export default {
  name: 'index',
  data () {
    return {
      shareVisible: false,
      goodsList: []
    }
  },
  props: ['item'],
  components: {
  },
  methods: {
      // 积分兑换详情页
      goPointsgoodsDetail (pgoods_id) {
          uni.navigateTo({ url: '/pages/home/pointsgoods/Detail'+'?'+urlencode( { pgoods_id: pgoods_id } )})
      }
  }
}
</script>

<style scoped lang="scss">
    .main-content{font-size:$subFontSize;line-height: 1.8;}
    .font-size-activity-tag {font-size:$h6!important;}
    .color-tip { color: #909399!important; }
    .color-base-text {color: #ff4544!important;}
    .goods-item {position: relative;background-color: #fff;border-radius: 5px;margin-bottom:.5rem;}
    .goods-item .goods-img {position: relative;overflow: hidden;padding-top: 100%;border-top-left-radius: 5px;border-top-right-radius: 5px}
    .goods-item .goods-img .img-content {width: 100%;height:100%;position: absolute;top: 50%;left: 0;-webkit-transform: translateY(-50%);transform: translateY(-50%)}
    .goods-item .goods-tag {color: #fff;line-height: 1;padding: 4px 8px;position: absolute;border-bottom-right-radius: 5px;top: 0;left: 0;font-size:$fontSize}
    .goods-item .goods-tag-img {position: absolute;border-top-left-radius: 5px;width: 40px;height: 40px;top: 0;left: 0;z-index: 5;overflow: hidden}
    .goods-item .goods-tag-img .img-content {width: 100%;height: 100%}
    .goods-item .info-wrap {padding: 0 13px 13px 13px}
    .goods-item .goods-name {font-size:$subFontSize;line-height: 1.3;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 1;-webkit-box-orient: vertical;margin-top: 10px;height: 18px}
    .goods-item .discount-price {display: inline-block;font-weight: 700;line-height: 1;margin-top: 8px}
    .goods-item .discount-price .unit {margin-right: 3px}
    .goods-item .pro-info {display: flex;margin-top: 8px}
    .goods-item .pro-info > .view-content {line-height: 1;-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;display: flex;align-items: center}
    .goods-item .pro-info > .view-content:nth-child(2) {-webkit-box-pack: end;-webkit-justify-content: flex-end;justify-content: flex-end}
    .img-content >img{width: 100%;height: 100%;}
    .bottom-wrapper{display: flex;
        .lineheight-clear{flex:1}
    }
</style>