yanzong_qianduan/components/page/diyComponents/bargain/index.vue

<template>
  <!-- 砍价商品组 -->
  <view class="diy-bargain" :style="{ background: itemStyle.background }">
    <view class="goods-item" v-for="(goods, idx) in dataList" :key="idx" @click="handleNavDetail(goods)">
      <!-- 商品图片 -->
      <view class="goods-image">
        <image class="image" :src="goods.goods_image"></image>
      </view>
      <view class="goods-info">
        <!-- 商品名称 -->
        <view v-if="inArray('goodsName', itemStyle.show)" class="goods-name">
          <text class="twoline-hide">{{ goods.goods_name }}</text>
        </view>
        <!-- 参与的用户头像 -->
        <view v-if="inArray('peoples', itemStyle.show) && goods.helpsCount" class="peoples">
          <view class="user-list">
            <view v-for="(help, hidx) in goods.helpList" :key="hidx" class="user-item-avatar">
              <avatar-image :url="help.user.avatar_url" :width="32" />
            </view>
          </view>
          <view class="people__text">
            <text>{{ goods.helpsCount }}人正在砍价</text>
          </view>
        </view>
        <!-- 商品原价 -->
        <view v-if="inArray('originalPrice', itemStyle.show)" class="goods-price">
          <text>￥{{ goods.original_price }}</text>
        </view>
        <!-- 砍价低价 -->
        <view v-if="inArray('floorPrice', itemStyle.show)" class="floor-price">
          <text class="small">最低￥</text>
          <text class="big">{{ goods.floor_price }}</text>
        </view>
        <!-- 操作按钮 -->
        <view class="opt-touch">
          <view class="touch-btn">
            <text>立即参加</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import AvatarImage from '@/components/avatar-image'
  import { inArray } from '@/utils/util'
  import mixin from '../mixin'

  export default {
    components: {
      AvatarImage
    },

    /**
     * 组件的属性列表
     * 用于组件自定义设置
     */
    props: {
      itemIndex: String,
      itemStyle: Object,
      params: Object,
      dataList: Array
    },

    data() {
      return { inArray }
    },

    mixins: [mixin],

    /**
     * 组件的方法列表
     * 更新属性和数据的方法与更新页面数据的方法类似
     */
    methods: {

      // 跳转到砍价商品详情
      handleNavDetail(item) {
        this.$navTo('pages/bargain/goods/index', { activeId: item.active_id, goodsId: item.goods_id })
      }

    }

  }
</script>

<style lang="scss" scoped>
  // diy-砍价商品组
  .diy-bargain {

    .goods-item {
      display: flex;
      margin-bottom: 20rpx;
      background: #fff;
      padding: 20rpx 16rpx;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .goods-item .goods-image .image {
      display: block;
      width: 220rpx;
      height: 220rpx;
    }

    .goods-item .goods-info {
      width: 498rpx;
      padding-top: 4rpx;
      margin-left: 14rpx;
      position: relative;

      .goods-name {
        font-size: 28rpx;
        min-height: 60rpx;
      }
    }

    // 正在参与的用户
    .peoples {
      display: flex;
      margin-top: 14rpx;

      .user-list {
        display: flex;
        margin-right: 10rpx;

        .user-item-avatar {
          margin-left: -8rpx;

          &:first-child {
            margin-left: 0;
          }
        }
      }

      .people__text {
        font-size: 24rpx;
        color: #818181;
      }
    }

    // 商品原价
    .goods-price {
      margin-top: 14rpx;
      color: #818181;
      font-size: 24rpx;
      text-decoration: line-through;
    }

    // 砍价底价
    .floor-price {
      color: $main-bg;

      .small {
        font-size: 24rpx;
      }

      .big {
        font-size: 24rpx;
      }
    }


    // 立即参加按钮
    .opt-touch {
      position: absolute;
      bottom: 0;
      right: 10rpx;

      .touch-btn {
        color: #fff;
        font-size: 28rpx;
        background: #d3a975;
        border-radius: 30rpx;
        padding: 10rpx 28rpx;
      }
    }


  }
</style>