第一次提交

pages/groupon/goods/components/TaskList.vue

@@ -0,0 +1,193 @@
+<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">
+          <avatar-image class="user-avatar" :url="item.user.avatar_url" :width="60" />
+          <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">
+              <avatar-image class="user-avatar" :url="item.user.avatar_url" :width="60" />
+              <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>