hlm_pl_mall_h5/pages/member/live/child/goodslist.vue

<template>
    <cover-view class="div goods-inner">
        <text class="div goods-title">相关商品</text>
        <cover-image mode="aspectFit" src="@/static/image/live/close.png" class="img close" @click="hide" />
        <scroll-view :scroll-y="true" :show-scrollbar="false" class="div goods-box" v-if="goods && goods.length">
            <cover-view class="div goods-item" v-for="item in goods" :key="item.goods_id" @click="sendgoods(item)">
                <cover-image mode="aspectFit" class="img goods-img" :src="item.goods_image" @click="goGoods(item)"/>
                <cover-view class="div goods-info">
                    <cover-view class="name-wrapper"><text class="div name" @click="goGoods(item)">{{item.goods_name}}</text></cover-view>
                    <cover-view><text class="div price">￥ {{item.goods_price}}</text></cover-view>
                </cover-view>
                <cover-image mode="aspectFit" src="@/static/image/live/cart.png" class="img cart" @click="sendgoods(item)"/>
            </cover-view>
        </scroll-view>
        <cover-view class="div empty" v-else>
            <text class="empty-text">没有相关商品</text>
        </cover-view>
    </cover-view>
</template>

<script>
import { urlencode } from '@/util/common'
export default {
  props: {
    goods: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data () {
    return {}
  },
  methods: {
    hide () {
      this.$emit('hidegoods')
    },
    sendgoods (goods) {
      this.$emit('buy', goods)
    },
      goGoods(goods){
          uni.navigateTo({ url: '/pages/home/goodsdetail/Goodsdetail'+'?'+urlencode( { 'goods_id': goods.goods_id } )})
      }
  },
  computed: {}
}
</script>
<style lang="scss" scoped>
    .goods-inner {
        padding: 0 24rpx;
        /*  #ifndef  APP-PLUS-NVUE  */
        box-sizing: border-box;
        /*  #endif  */
    }
    .goods-title {
        height: 114rpx;
        line-height: 114rpx;
        font-family: PingFangSC-Medium;
        font-size:16px;
        color: #111111;
        /*  #ifndef  APP-PLUS-NVUE  */
        letter-spacing: 0;
        /*  #endif  */
        text-align: left;
        /*  #ifndef  APP-PLUS-NVUE  */
        display: block;
        /*  #endif  */
        border-bottom: 1px solid #DBDBDB;
    }
    .close {
        height: 64rpx;
        width: 64rpx;
        position: absolute;
        right: 24rpx;
        top: 24rpx;
    }
    .goods-item {
        padding: 24rpx 0;
        border-bottom: 1px solid #eee;
        position: relative;
        /*  #ifndef  APP-PLUS-NVUE  */
        display: flex;
        /*  #endif  */;
        flex-direction: row;
    }
    .goods-box {
        padding: 24rpx;
        position: absolute;
        left:0;
        right: 0;
        top:120rpx;
        bottom:0;
        /*  #ifndef  APP-PLUS-NVUE  */
        box-sizing: border-box;
        /*  #endif  */
    }
    .goods-item-img {
        width: 84rpx;
        height: 171rpx;
        margin-top: 24rpx;
    }
    .goods-info {
        flex:1;
        /*  #ifndef  APP-PLUS-NVUE  */
        display: flex;
        /*  #endif  */
        padding-left: 24rpx;
        flex-direction: column;
        justify-content: space-between;
    }
    .goods-img {
        height: 140rpx;
        width: 140rpx;
        /*  #ifndef  APP-PLUS-NVUE  */
        display: inline-block;
        vertical-align: middle;
        /*  #endif  */
    }
    .name-wrapper{
        /*  #ifndef  APP-PLUS-NVUE  */
        display: flex;
        /*  #endif  */
    }
    .name {
      flex:1;
        font-family: PingFangSC-Medium;
        font-size:14px;
        color: #333333;
        /*  #ifndef  APP-PLUS-NVUE  */
        letter-spacing: 0;
        /*  #endif  */
        lines:2;
    }
    .price {
        height: 30rpx;
        line-height: 30rpx;
        font-size: 14px;
        color: #EE4E4E;
    }
    .cart{
        position: absolute;
        right: 24rpx;
        width: 36rpx;
        height: 36rpx;
        bottom: 28rpx;
    }
    .empty{text-align: center;padding-top:50rpx;}
    .empty-text{font-size:16px;}
</style>