更换团购商品列表

components/ShoproLiveCard.vue

@@ -33,6 +33,7 @@
 </template>
 
 <script>
+	import { dataFormatL } from "@/utils";
 	let HAS_LIVE = false
 	// #ifdef MP-WEIXIN
 	HAS_LIVE = true
@@ -116,9 +117,9 @@
 					let that = this;
 					let date = '';
 					if (that.detail.liveStatus == 102) {
-						// date = that.$tools.dateFormat('mm-dd HH:MM', new Date(that.detail.starttime * 1000)).replace('-',
+						 date = dataFormatL('mm-dd HH:MM', new Date(that.detail.starttime * 1000)).replace('-',
-							// '/');
+							 '/');
-						that.liveStatus['102'].title = '预告 ' ;
+							that.liveStatus['102'].title = '预告 ' + date;
 					}
 					livePlayer
 						.getLiveStatus({
@@ -302,4 +303,4 @@
 			}
 		}
 	}
-</style>
+</style>

pages/activity/GoodsGroup/children/activity-card.vue

@@ -0,0 +1,101 @@
+<template>
+  <view class="activity-goods-box x-bc" @tap="jump('/pages/activity/GroupDetails/index', { id: id })">
+    <view class="img-box">
+      <slot name="tag"></slot>
+      <image class="img" :src="img" mode="aspectFill"></image>
+    </view>
+    <view class="goods-right y-bc">
+      <view class="title one-t">{{ title }}</view>
+      <view class="tip one-t">{{ info }}</view>
+      <view class="slod-end"><slot name="sell"></slot></view>
+      <view class=" price-box">
+        <view class="x-f">
+          <view class="current">￥{{ price }}</view>
+          <view class="original">￥{{ productPrice }}</view>
+        </view>
+      </view>
+      <slot name="btn"></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'activityCard',
+  components: {},
+  data() {
+    return {};
+  },
+  props: {
+    cId: 0,
+    img: '',
+    title: '',
+    info: '',
+    price: '',
+    productPrice: ''
+  },
+  computed: {},
+  created() {},
+  methods: {
+    // 路由跳转
+    jump(path, parmas) {
+      this.$yrouter.push({ path: path, query: parmas });
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.activity-goods-box {
+  padding: 40rpx 20rpx;
+  background: #fff;
+
+  .img-box {
+    margin-right: 20rpx;
+    width: 200rpx;
+    height: 200rpx;
+    overflow: hidden;
+    position: relative;
+
+    .img {
+      width: 200rpx;
+      height: 200rpx;
+      background-color: #ccc;
+    }
+  }
+
+  .goods-right {
+    width: 450rpx;
+    min-height: 200rpx;
+    align-items: flex-start;
+    position: relative;
+    .title {
+      font-size: 28rpx;
+      line-height: 28rpx;
+      width: 450rpx;
+    }
+
+    .tip {
+      font-size: 22rpx;
+      color: #a8700d;
+      width: 500rpx;
+    }
+
+    .price-box {
+      .current {
+        font-size: 28rpx;
+        font-weight: 500;
+        color: rgba(225, 33, 43, 1);
+      }
+
+      .original {
+        font-size: 22rpx;
+        font-weight: 400;
+        text-decoration: line-through;
+        color: rgba(153, 153, 153, 1);
+        margin-left: 14rpx;
+      }
+    }
+  }
+}
+</style>

pages/activity/GoodsGroup/index.vue

@@ -1,90 +1,228 @@
 <template>
-  <view class="group-list" ref="container">
+  <view class="page_box">
-    <view class="list" v-if="combinationList.length>0">
+    <view class="content_box">
-      <view
+      <scroll-view class="scroll-box" scroll-y enable-back-to-top scroll-with-animation @scrolltolower="loadMore">
-        class="item acea-row row-between-wrapper"
+        <view class="group-wrap">
-        v-for="(item, combinationListIndex) in combinationList"
+          <view class="group-head x-bc">
-        :key="combinationListIndex"
+            <text class="group-head__title">爆款推荐</text>
-        @click="link(item.id)"
+            <text class="group-head__notice">省钱省心限时拼</text>
-      >
-        <view class="pictrue">
-          <image :src="item.image" />
-        </view>
-        <view class="text">
-          <view class="line1" v-text="item.title"></view>
-          <view class="acea-row">
-            <view class="team acea-row row-middle cart-color">
-              <view class="iconfont icon-pintuan"></view>
-              <view class="num" v-text="item.people + '人团'"></view>
-            </view>
           </view>
-          <view class="bottom acea-row row-between-wrapper">
+          <view class="group-box">
-            <view class="money">
+            <view class="goods-item" v-for="(groupon, index) in grouponList" :key="groupon.id">
-              ￥
+              <activity-card
-              <text class="num" v-text="item.price"></text>
+                  :cId="groupon.id"
-              <text class="y-money" v-text="'￥' + item.productPrice"></text>
+                  :title="groupon.title"
-            </view>
+                  :info="groupon.info"
-            <view class="groupBnt bg-color-red">
+                  :img="groupon.image"
-              去拼团
+                  :price="groupon.price"
-              <text class="iconfont icon-jiantou"></text>
+                  :productPrice="groupon.productPrice"
+              >
+                <block slot="tag">
+                  <view class="tag" v-if="index < 3">TOP{{ index + 1 }}</view>
+                </block>
+                <block slot="sell">
+                  <view class="x-f">
+                    <view class="sell-box">
+                      <text class="cuIcon-hotfill"></text>
+                      <text class="sell-num">已拼{{ groupon.sales }}件</text>
+                    </view>
+                    <text class="group-num">{{ groupon.people || 0 }}人团</text>
+                  </view>
+                </block>
+                <block slot="btn"><button class="cu-btn buy-btn" @tap.stop="jump('/pages/activity/GroupDetails/index', { id: groupon.id })">马上拼</button></block>
+              </activity-card>
             </view>
           </view>
         </view>
-      </view>
+        <!-- 空白 -->
-      <Loading :loaded="status" :loading="loadingList"></Loading>
+<!--        <shopro-empty v-if="!grouponList.length && !isLoading" :emptyData="emptyData"></shopro-empty>-->
-    </view>
+        <!-- 加载更多 -->
-    <view class="noCommodity" style="background-color: #fff;" v-if="combinationList.length === 0">
+        <view v-if="grouponList.length" class="cu-load text-gray" :class="loadStatus"></view>
-      <view class="noPictrue">
+        <!-- loading -->
-        <image src="@/static/images/noGood.png" class="image" />
+        <shopro-load v-model="isLoading"></shopro-load>
-      </view>
+      </scroll-view>
     </view>
+    <!-- 自定义底部导航 -->
+    <shopro-tabbar></shopro-tabbar>
   </view>
 </template>
+
 <script>
+import activityCard from './children/activity-card.vue';
 import { getCombinationList } from "@/api/activity";
-import Loading from "@/components/Loading";
-
 export default {
-  name: "GoodsGroup",
   components: {
-    Loading
+    activityCard
   },
-  props: {},
+  data() {
-  data: function() {
     return {
-      combinationList: [],
+      emptyData: {
-      status: false, //砍价列表是否获取完成 false 未完成 true 完成
+        img: '/static/imgs/empty/empty_goods.png',
-      loading: false, //当前接口是否请求完成 false 完成 true 未完成
+        tip: '还没有拼团商品噢，去首页看看吧~',
-      page: 1, //页码
+        path: '/pages/index/index',
-      limit: 20, //数量
+        pathText: '去首页逛逛'
-      loadingList: false
+      },
+      status:'',
+      isLoading: true,
+      loadStatus: '', //loading,over
+      lastPage: 0,
+      currentPage: 1,
+      grouponList: []
     };
   },
-  mounted: function() {
+  onLoad() {
-    // document.querySelector('body').setAttribute('style', 'background-color:#eb3729');
+    this.getGrouponList();
-    this.getCombinationList();
-  },
-  onReachBottom() {
-    !this.loadingList && this.getCombinationList();
   },
+  onPullDownRefresh() {},
+  computed: {},
   methods: {
-    getCombinationList: function() {
+    // 路由跳转
-      var that = this;
+    jump(path, parmas) {
-      if (that.loading) return;
+      this.$yrouter.push({
-      if (that.status) return;
+        path: path,
-      getCombinationList({ page: that.page, limit: that.limit }).then(res => {
+        query: parmas
-        that.status = res.data.length < that.limit;
-        that.combinationList.push.apply(that.combinationList, res.data);
-        that.page++;
-        that.loading = false;
       });
     },
-    link: function(id) {
+    // 加载更多
-      this.$yrouter.push({
+    loadMore() {
-        path: "/pages/activity/GroupDetails/index",
+      if (this.currentPage < this.lastPage) {
-        query: { id }
+        this.currentPage += 1;
+        this.getGrouponList();
+      }
+    },
+    // 拼团列表
+    getGrouponList() {
+      let that = this;
+      that.isLoading = true;
+      that.loadStatus = 'loading';
+      getCombinationList({ page:that.currentPage, limit: 10 }).then(res => {
+        that.status = res.data.length < 10;
+        that.grouponList.push.apply(that.grouponList, res.data);
+        that.lastPage = res.data.last_page;
+          if (that.currentPage < res.data.last_page) {
+            that.loadStatus = '';
+          } else {
+            that.loadStatus = 'over';
+          }
+        that.loading = false;
       });
+
+      // that.$api('goods.grouponList', {
+      //   page: that.currentPage
+      // }).then(res => {
+      //   if (res.code === 1) {
+      //     that.isLoading = false;
+      //     that.grouponList = [...that.grouponList, ...res.data.data];
+      //     // that.grouponList=[];
+      //     that.lastPage = res.data.last_page;
+      //     if (that.currentPage < res.data.last_page) {
+      //       that.loadStatus = '';
+      //     } else {
+      //       that.loadStatus = 'over';
+      //     }
+      //   }
+      // });
     }
   }
 };
 </script>
+
+<style lang="scss">
+.group-wrap {
+  background: url('~@/static/images/group_list_bg.png') no-repeat;
+  background-size: 100% 374rpx;
+}
+.group-head {
+  padding: 0 25rpx;
+  height: 100rpx;
+  .group-head__title {
+    font-size: 32rpx;
+    font-family: PingFang SC;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 1);
+  }
+  .group-head__notice {
+    font-size: 26rpx;
+    font-family: PingFang SC;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 1);
+  }
+}
+
+.group-box {
+  width: 710rpx;
+  background: linear-gradient(#fff, #f5f5f5);
+  border-radius: 20rpx;
+  margin: 0 auto;
+  min-height: 1000rpx;
+  .goods-item {
+    border-radius: 20rpx;
+    overflow: hidden;
+    position: relative;
+    margin-bottom: 20rpx;
+    .tag {
+      position: absolute;
+      left: 0;
+      top: 10rpx;
+      z-index: 2;
+      line-height: 35rpx;
+      background: linear-gradient(132deg, rgba(255, 153, 93, 1), rgba(255, 99, 97, 1));
+      border-radius: 0px 18rpx 18rpx 0px;
+      padding: 0 10rpx;
+      font-size: 24rpx;
+      font-family: PingFang SC;
+      font-weight: bold;
+      color: rgba(255, 255, 255, 0.8);
+    }
+    /deep/.goods-right {
+      width: 460rpx;
+      .title {
+        width: 460rpx;
+      }
+      .tip {
+        width: 460rpx;
+      }
+    }
+    .buy-btn {
+      position: absolute;
+      right: 0;
+      bottom: -10rpx;
+      width: 160rpx;
+      height: 60rpx;
+      background: linear-gradient(90deg, rgba(254, 131, 42, 1), rgba(255, 102, 0, 1));
+      box-shadow: 0px 7rpx 6rpx 0px rgba(255, 104, 4, 0.22);
+      border-radius: 30rpx;
+      font-size: 28rpx;
+      font-family: PingFang SC;
+      font-weight: 500;
+      color: #fff;
+      padding: 0;
+    }
+    .group-num {
+      font-size: 20rpx;
+      font-family: PingFang SC;
+      font-weight: 500;
+      color: rgba(153, 153, 153, 1);
+      margin-left: 20rpx;
+    }
+    .sell-box {
+      background: rgba(255, 224, 226, 0.3);
+      border-radius: 16rpx;
+      line-height: 32rpx;
+      padding: 0 10rpx;
+      .sell-num {
+        font-size: 20rpx;
+        font-family: PingFang SC;
+        font-weight: 400;
+        color: rgba(247, 151, 156, 1);
+      }
+
+      .cuIcon-hotfill {
+        font-size: 26rpx;
+        color: #e1212b;
+        margin-right: 8rpx;
+      }
+    }
+  }
+}
+</style>

utils/index.js

@@ -38,7 +38,27 @@ export function dataFormat(time, option) {
 		return timeStr
 	}
 }
-
+	// 年月日，时分秒
+	// "YYYY-mm-dd HH:MM"
+export function	dateFormatL(fmt, date) {
+		let ret;
+		const opt = {
+			"Y+": date.getFullYear().toString(), // 年
+			"m+": (date.getMonth() + 1).toString(), // 月
+			"d+": date.getDate().toString(), // 日
+			"H+": date.getHours().toString(), // 时
+			"M+": date.getMinutes().toString(), // 分
+			"S+": date.getSeconds().toString() // 秒
+			// 有其他格式化字符需求可以继续添加，必须转化成字符串
+		};
+		for (let k in opt) {
+			ret = new RegExp("(" + k + ")").exec(fmt);
+			if (ret) {
+				fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
+			};
+		};
+		return fmt;
+	}
 export function dateFormatT(time) {
 	time = +time * 1000;
 	const d = new Date(time);