yanzong_qianduan/pages/groupon/goods/components/TaskList.vue

<template>
  <!-- 进行中的团购 -->
  <view v-if="list.length" class="goods-task m-top20" :style="appThemeStyle">
    <view class="item-title dis-flex">
      <view class="block-left flex-box">
        <text>进行中的团购</text>
      </view>
      <view class="block-right">
        <text class="iconfont icon-arrow-right col-9" @click="onShowMore()"></text>
      </view>
    </view>
    <!-- 拼单列表 -->
    <view class="task-list">
      <view class="task-item" v-for="(item, index) in list" :key="index">
        <view class="user-info">
          <view class="user-avatar">
            <avatar-image :url="item.user.avatar_url" :width="60" />
          </view>
          <text class="user-name oneline-hide">{{ item.user.nick_name }}</text>
        </view>
        <view class="task-status">
          <view class="people">
            <text>还差</text>
            <text class="col-m">{{ item.surplus_people }}人</text>
            <text>成团</text>
          </view>
          <view class="count-down">
            <text>剩余</text>
            <count-down :date="item.end_time" separator="colon" theme="text" />
          </view>
        </view>
        <view class="item-action">
          <view class="button" @click="onTargetTask(item.task_id)">去参团</view>
        </view>
      </view>
    </view>

    <!-- 更多拼单弹窗 -->
    <u-modal v-model="showMore" title="可参与的拼单">
      <scroll-view style="max-height: 610rpx; touch-action: none;" :scroll-y="true">
        <view class="pops-content">
          <view class="task-item" v-for="(item, index) in moreList" :key="index">
            <view class="user-info">
              <view class="user-avatar">
                <avatar-image :url="item.user.avatar_url" :width="60" />
              </view>
              <text class="user-name oneline-hide">{{ item.user.nick_name }}</text>
            </view>
            <view class="item-action">
              <view class="button" @click="onTargetTask(item.task_id)">去参团</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </u-modal>

  </view>
</template>

<script>
  import AvatarImage from '@/components/avatar-image'
  import CountDown from '@/components/countdown'
  import * as TaskApi from '@/api/groupon/task'

  export default {
    components: {
      AvatarImage,
      CountDown
    },
    props: {
      // 拼团商品ID
      grouponGoodsId: {
        type: Number,
        default: null
      },
      // 商品ID
      list: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        // 显示更多拼单
        showMore: false,
        // 更多拼单列表
        moreList: []
      }
    },

    methods: {

      // 显示更多拼单
      onShowMore() {
        const app = this
        if (!app.moreList.length) {
          TaskApi.listByGoods(app.grouponGoodsId)
            .then(result => {
              app.moreList = result.data.list
              app.showMore = true
            })
        } else {
          app.showMore = true
        }
      },

      // 跳转到评论列表页
      onTargetTask(taskId) {
        this.$navTo('pages/groupon/task/index', { taskId })
      }

    }
  }
</script>

<style lang="scss" scoped>
  .goods-task {
    padding: 20rpx 30rpx;
    background-color: #fff;
  }

  .item-title {
    font-size: 28rpx;
    margin-bottom: 24rpx;
  }

  .task-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6rpx;
    margin-bottom: 32rpx;

    &:last-child {
      margin-bottom: 0 !important;
      border-bottom: none;
    }

  }

  .user-info {
    width: 260rpx;
    display: flex;
    align-items: center;

    .user-avatar {
      margin-right: 10rpx;
    }

    .user-name {
      font-size: 28rpx;
    }
  }


  .task-status {
    width: 250rpx;
    padding-left: 36rpx;
    font-size: 26rpx;

    .people {
      margin-bottom: 10rpx;
    }

    .count-down {
      display: flex;
      color: #999;
      font-size: 24rpx;
    }
  }

  .item-action {
    .button {
      padding: 0 24rpx;
      line-height: 52rpx;
      text-align: center;
      font-size: 28rpx;
      border-radius: 40rpx;
      color: #fff;
      background: $main-bg;
    }
  }

  // 更多拼单
  .pops-content {
    padding: 40rpx 30rpx;

    .task-item {
      margin-bottom: 44rpx;
    }

    .user-avatar {
      margin-right: 30rpx;
    }

  }
</style>