seckill.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422
  1. <template>
  2. <view class="seckillBox">
  3. <view class="top"></view>
  4. <view class="seckill-bg">
  5. <image src="../../static/img/seckill.png" mode=""></image>
  6. </view>
  7. <scroll-view scroll-x="true" class="class-box flex b-t" :scroll-left="scrollLeft" :scroll-with-animation="true">
  8. <view @click="tabClass(idx)" class="item" :style="{ width: topNavWidth }" v-for="(item, idx) in indexList" :key="idx">
  9. <view class="time" :class="{ action: idx == classIndex }">{{ item.time }}</view>
  10. <view class="status" :class="{ action: idx == classIndex }">{{ item.state }}</view>
  11. </view>
  12. </scroll-view>
  13. <swiper class="list-Box" :current="classIndex" @change="swiperChange" duration="500">
  14. <swiper-item class="list-item" v-for="(ls, idx) in indexList">
  15. <view class=" b-b position-relative">
  16. <view class="title-box flex ">
  17. <view class="title-box-left">
  18. <text v-if="ls.status == 1">抢购中先下先得哦!</text>
  19. <text v-if="ls.status == 2">精品好货即将开抢!</text>
  20. <text v-if="ls.status == 0">本场已结束,下次早点来哦!</text>
  21. </view>
  22. <view class="title-box-right flex">
  23. <text class="tip" v-if="ls.status == 1">距离结束</text>
  24. <text class="tip" v-if="ls.status == 2">距离开始</text>
  25. <uni-countdown
  26. color="#F9F9F8"
  27. background-color="#666666"
  28. v-if="ls.status == 1 || ls.status == 2"
  29. :show-day="false"
  30. :hour="ls.stopTimeH"
  31. :minute="ls.stopTimeM"
  32. :second="ls.stopTimeS"
  33. ></uni-countdown>
  34. </view>
  35. </view>
  36. </view>
  37. <scroll-view scroll-y="true" class="list" @scrolltolower="getList(classIndex)">
  38. <view class="goodsList-item flex" :key="ind" v-for="(lss, ind) in ls.dataList">
  39. <image :src="lss.image" lazy-load mode="scaleToFill"></image>
  40. <view class="goodsList-content">
  41. <view class="title clamp">
  42. <text>{{ lss.title }}</text>
  43. </view>
  44. <!-- <view class="slider flex">
  45. <view class="slider-box"><view class="slider-action" :style="{ width: lss.percent + '%' }"></view></view>
  46. <view class="sales-nub">已抢{{ lss.percent + '%' }}</view>
  47. </view> -->
  48. <view class="goods-money flex">
  49. <view class="money-box">
  50. <view class="money">
  51. <text class="font-size-sm">¥</text>
  52. {{ lss.price }}
  53. </view>
  54. <view class="otMoney-box">
  55. <text class="otMoney">¥{{ lss.ot_price }}</text>
  56. </view>
  57. </view>
  58. <view @click="navProduct(ls, ind)" class="cart" :class="{ 'seckill-action': ls.status == 1 }">
  59. {{ ls.status == 1 ? '去抢购' : ls.status == 2 ? '未开始' : '已结束' }}
  60. </view>
  61. </view>
  62. </view>
  63. </view>
  64. <uni-load-more :status="ls.loadingType"></uni-load-more>
  65. </scroll-view>
  66. </swiper-item>
  67. </swiper>
  68. </view>
  69. </template>
  70. <script>
  71. import { getSeckillList, getSeckillClass } from '@/api/product.js';
  72. import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
  73. import { timeComputed } from '@/utils/rocessor.js';
  74. export default {
  75. components: {
  76. uniCountdown,
  77. },
  78. data() {
  79. return {
  80. indexList: [], //分类列表
  81. showTime: '', //显示的时间
  82. showTImeId: '', //显示时间id用于查询数据
  83. // 判断是否所有活动已经结束
  84. stop: false, //活动是否已经结束
  85. show: false, //是否显示活动
  86. status: 0, //获取状态值1为有活动开始中 2为活动未开始 0为活动已经结束
  87. topNavWidth: '25%', //设置导航默认宽度
  88. classIndex: 0, //当前进行中的活动
  89. itemWidht: 0 //顶部分类宽度
  90. };
  91. },
  92. computed: {
  93. // 计算左侧距离
  94. scrollLeft() {
  95. if (this.classIndex > 1) {
  96. return this.itemWidht * (this.classIndex - 1.5);
  97. } else {
  98. return 0;
  99. }
  100. }
  101. },
  102. onLoad: function(e) {
  103. // 载入分类
  104. this.getClass();
  105. },
  106. methods: {
  107. //抢购时间切换时触发效果
  108. swiperChange(e) {
  109. this.classIndex = e.target.current;
  110. this.getList(this.classIndex, 'tabChange');
  111. },
  112. // 获取项目宽度
  113. numClassWidht() {
  114. uni.createSelectorQuery()
  115. .select('.seckillBox')
  116. .fields(
  117. {
  118. size: true
  119. },
  120. data => {
  121. // 设置项目宽度
  122. this.itemWidht = Math.floor((data.width / 750) * 187.5);
  123. }
  124. )
  125. .exec();
  126. },
  127. // 切换当前选中的秒杀活动
  128. tabClass(ind) {
  129. // 保存当前选中的对象
  130. this.classIndex = ind;
  131. },
  132. // 跳转到商品详情
  133. navProduct(ls, ind) {
  134. if (ls.status == 1) {
  135. let data = ls.dataList[ind];
  136. uni.navigateTo({
  137. url: '/pages/product/product?id=' + data.id + '&type=1'
  138. });
  139. }
  140. },
  141. // 获取商品
  142. getList(ind, source) {
  143. // 获取数据对象
  144. let date = this.indexList[ind];
  145. console.log(date, source);
  146. if (source === 'tabChange' && date.loaded === true) {
  147. //tab切换只有第一次需要加载数据
  148. return;
  149. }
  150. if (date.loadingType === 'noMore') {
  151. //防止重复加载
  152. return;
  153. }
  154. if (date.loadingType === 'loading') {
  155. //防止重复加载
  156. return;
  157. }
  158. // 修改当前对象状态为加载中
  159. date.loadingType = 'loading';
  160. getSeckillList(
  161. {
  162. page: date.page,
  163. limit: date.limit
  164. },
  165. date.id
  166. )
  167. .then(e => {
  168. date.dataList.push(...e.data);
  169. // 查询翻页增加
  170. date.page++;
  171. // 判断是否可以继续加载
  172. if (date.limit == e.data.length) {
  173. date.loadingType = 'more';
  174. } else {
  175. date.loadingType = 'noMore';
  176. }
  177. // 设置当前数据已加载完毕
  178. this.$set(date, 'loaded', true);
  179. })
  180. .catch(e => {
  181. console.log(e);
  182. });
  183. },
  184. // 获取秒杀时间段
  185. getClass() {
  186. let obj = this;
  187. getSeckillClass({})
  188. .then(({ data }) => {
  189. obj.indexList = data.seckillTime.map((e, ind) => {
  190. console.log(e, 'eeee');
  191. // 初始化翻页页数
  192. e.page = 1;
  193. // 初始每次加载的数据条数
  194. e.limit = 6;
  195. // 创建储存订单数据
  196. e.dataList = [];
  197. // 初始化加载
  198. // e.loadingType = 'more';
  199. let ar = e;
  200. // 判断是否为进行中的活动
  201. if (ar.status === 1) {
  202. // 计算倒计时时间
  203. obj.timeComputed(ar.stop * 1000, ar);
  204. } else {
  205. // 获取距离开始还需要多少时间
  206. let arTime = ar.time.split(':');
  207. let h = arTime[0];
  208. let m = arTime[1];
  209. let time = new Date();
  210. // 设置时间
  211. time.setHours(h, m, 0);
  212. // 计算倒计时时间
  213. obj.timeComputed(time.getTime(), ar);
  214. }
  215. return e;
  216. });
  217. // 获取当前活动中的下标值
  218. obj.classIndex = data.seckillTimeIndex;
  219. // 获取当前显示中对象的数据
  220. obj.$nextTick(() => {
  221. obj.getList(obj.classIndex);
  222. });
  223. if (obj.indexList.length <= 4) {
  224. // 当数量小于等于4的时候自适应宽度
  225. obj.topNavWidth = 100 / obj.indexList.length + '%';
  226. } else {
  227. // 页面渲染完毕后加载scroll-view左侧距离
  228. obj.$nextTick(() => {
  229. obj.numClassWidht();
  230. });
  231. }
  232. })
  233. .catch(e => {
  234. console.log(e);
  235. });
  236. },
  237. // 计算倒计时时间
  238. timeComputed(da, ar) {
  239. let obj = this;
  240. // 计算时间,保存需要多少时间到期
  241. let stopTime = timeComputed(da);
  242. console.log(stopTime);
  243. ar.stopTimeH = stopTime.hours;
  244. ar.stopTimeM = stopTime.minutes;
  245. ar.stopTimeS = stopTime.seconds;
  246. }
  247. }
  248. };
  249. </script>
  250. <style lang="scss">
  251. page,
  252. .seckillBox {
  253. min-height: 100%;
  254. height: 100%;
  255. }
  256. .top {
  257. width: 750rpx;
  258. height: 300rpx;
  259. background: #e83323;
  260. border-bottom-left-radius: 150rpx;
  261. border-bottom-right-radius: 150rpx;
  262. }
  263. .seckill-bg {
  264. width: 700rpx;
  265. height: 300rpx;
  266. margin: -260rpx auto 0;
  267. image {
  268. width: 100%;
  269. height: 100%;
  270. }
  271. }
  272. // 头部时间段样式
  273. .class-box {
  274. white-space: nowrap;
  275. height: 60px;
  276. .item {
  277. text-align: center;
  278. display: inline-block;
  279. color: $font-color-base;
  280. padding: 11.5px 5px;
  281. background-color: #ffffff;
  282. line-height: 1;
  283. .time {
  284. font-size: 16px;
  285. padding-bottom: 3px;
  286. &.action {
  287. color: $color-red;
  288. }
  289. }
  290. .status {
  291. font-size: 12px;
  292. margin: 0 auto;
  293. width: 60px;
  294. padding: 3px 0;
  295. &.action {
  296. color: #ffffff;
  297. border-radius: 99px;
  298. background-color: $color-red;
  299. }
  300. }
  301. }
  302. }
  303. // 列表上方标题样式
  304. .title-box {
  305. margin-top: 10px;
  306. padding: 10px;
  307. background-color: #ffffff;
  308. .title-box-left {
  309. font-size: 15px;
  310. color: $font-color-base;
  311. }
  312. .title-box-right {
  313. .tip {
  314. font-size: 15px;
  315. color: #999999;
  316. padding-right: 5px;
  317. }
  318. /deep/ .uni-countdown__number {
  319. border-radius: 3px;
  320. width: 22px;
  321. }
  322. /deep/ .uni-countdown__splitor,
  323. /deep/ .uni-countdown__number {
  324. height: 20px;
  325. line-height: 18px;
  326. }
  327. }
  328. }
  329. // 列表样式
  330. .list-Box {
  331. height: calc(100% - 60px);
  332. .list {
  333. height: calc(100% - 55px);
  334. }
  335. }
  336. // 商品列表
  337. $slider-color: #fe9398; //滑块左侧颜色
  338. .goodsList-item {
  339. background-color: #ffffff;
  340. padding: 30rpx;
  341. border-bottom: 1px solid $border-color-light;
  342. image {
  343. flex-shrink: 0;
  344. border-radius: $border-radius-sm;
  345. height: 180rpx;
  346. width: 180rpx;
  347. }
  348. .slider {
  349. margin-top: 15rpx;
  350. justify-content: flex-start;
  351. .slider-box {
  352. width: 196rpx;
  353. border-radius: 99px;
  354. border: 1px solid $slider-color;
  355. height: 16rpx;
  356. .slider-action {
  357. background-color: $slider-color;
  358. height: 100%;
  359. }
  360. }
  361. .sales-nub {
  362. color: $font-color-light;
  363. font-size: 24rpx;
  364. padding-left: 20rpx;
  365. }
  366. }
  367. .goodsList-content {
  368. margin-left: 20rpx;
  369. flex-grow: 1;
  370. height: 180rpx;
  371. position: relative;
  372. .title {
  373. font-size: $font-base;
  374. color: $font-color-dark;
  375. font-weight: 500;
  376. width: 0;
  377. min-width: 100%;
  378. }
  379. .goods-money {
  380. position: absolute;
  381. left: 0;
  382. bottom: 0;
  383. width: 100%;
  384. .money-box {
  385. .money {
  386. font-size: $font-lg + 10rpx;
  387. color: $color-red;
  388. font-weight: bold;
  389. }
  390. .otMoney-box {
  391. font-size: $font-sm;
  392. .otMoney {
  393. color: $font-color-light;
  394. padding-right: 20rpx;
  395. text-decoration: line-through;
  396. }
  397. .sales {
  398. color: $font-color-light;
  399. }
  400. }
  401. }
  402. .cart {
  403. font-size: $font-base;
  404. border-radius: 99px;
  405. padding: 15rpx 30rpx;
  406. line-height: 1;
  407. color: #ffffff;
  408. background-color: $color-gray;
  409. &.seckill-action {
  410. border: 1px solid $color-red;
  411. background-color: $color-red;
  412. }
  413. }
  414. }
  415. }
  416. }
  417. </style>