index.vue 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394
  1. <template>
  2. <!-- 限时秒杀模块 -->
  3. <div :style="colorStyle">
  4. <view class='flash-sale'>
  5. <view class="saleBox"></view>
  6. <view class='header' v-if="timeList.length>0">
  7. <image :src='timeList[active].slide'></image>
  8. </view>
  9. <view class="seckillList acea-row row-between-wrapper">
  10. <view class="priceTag">
  11. <image src="../static/priceTag.png"></image>
  12. </view>
  13. <view class='timeLsit'>
  14. <scroll-view class="scroll-view_x style-add" scroll-x scroll-with-animation :scroll-left="scrollLeft" :scroll-into-view="intoindex">
  15. <block v-for="(item,index) in timeList" :key='index'>
  16. <view @tap='settimeList(item,index)' class='item' :class="active == index?'on':''" :id='"sort"+index'>
  17. <view class='time'>{{item.time}}</view>
  18. <view class="state">{{item.state}}</view>
  19. </view>
  20. </block>
  21. </scroll-view>
  22. </view>
  23. </view>
  24. <view class='list'>
  25. <block v-for="(item,index) in seckillList" :key='index'>
  26. <view class='item acea-row row-between-wrapper' @tap='goDetails(item)'>
  27. <view class='pictrue'>
  28. <image :src='item.image'></image>
  29. <view class="activityFrame" v-if="item.activity_image" :style="'background-image: url('+item.activity_image+');'"></view>
  30. </view>
  31. <view class='text acea-row row-column-around'>
  32. <view class='name line1'>{{item.title}}</view>
  33. <view class='money'>
  34. <text class="font-color"></text>
  35. <text class='num font-color'>{{item.price}}</text>
  36. <text class="y_money">{{item.ot_price}}</text>
  37. </view>
  38. <view class="limit">限量 <text class="limitPrice">{{item.quota_show}}{{item.unit_name || ''}}</text></view>
  39. <view class="progress">
  40. <view class='bg-reds' :style="'width:'+item.percent+'%;'"></view>
  41. <view class='piece'>已抢{{item.percent}}%</view>
  42. </view>
  43. </view>
  44. <view class='grab bg-color' v-if="status == 1">马上抢</view>
  45. <view class='grab bg-color' v-else-if="status == 2">未开始</view>
  46. <view class='grab bg-color-hui' v-else>已结束</view>
  47. </view>
  48. </block>
  49. </view>
  50. </view>
  51. <view class="no-goods" v-if="seckillList.length == 0 && (page != 1 || active== 0)">
  52. <image :src="imgHost + '/statics/images/no-thing.png'" mode=""></image>
  53. <text class="tip">暂无秒杀商品,去看看其他商品吧~</text>
  54. </view>
  55. <home v-if="navigation"></home>
  56. </div>
  57. </template>
  58. <script>
  59. import {
  60. getSeckillIndexTime,
  61. getSeckillList
  62. } from '../../../api/activity.js';
  63. import home from '@/components/home/index.vue'
  64. import colors from '@/mixins/color.js'
  65. import {HTTP_REQUEST_URL} from '@/config/app';
  66. export default {
  67. components: {
  68. home
  69. },
  70. mixins:[colors],
  71. data() {
  72. return {
  73. topImage: '',
  74. seckillList: [],
  75. timeList: [],
  76. active: 5,
  77. scrollLeft: 0,
  78. interval: 0,
  79. status: 1,
  80. countDownHour: "00",
  81. countDownMinute: "00",
  82. countDownSecond: "00",
  83. page: 1,
  84. limit: 8,
  85. loading: false,
  86. loadend: false,
  87. pageloading: false,
  88. intoindex:'',
  89. imgHost:HTTP_REQUEST_URL
  90. }
  91. },
  92. onLoad() {
  93. this.getSeckillConfig();
  94. },
  95. onShow(){
  96. uni.removeStorageSync('form_type_cart');
  97. },
  98. methods: {
  99. getSeckillConfig: function() {
  100. let that = this;
  101. getSeckillIndexTime().then(res => {
  102. that.topImage = res.data.lovely;
  103. that.timeList = res.data.seckillTime;
  104. that.active = res.data.seckillTimeIndex;
  105. that.$nextTick(()=>{
  106. that.intoindex = 'sort'+res.data.seckillTimeIndex
  107. })
  108. if (that.timeList.length) {
  109. // wxh.time(that.data.timeList[that.data.active].stop, that);
  110. that.scrollLeft = (that.active - 1.37) * 100
  111. setTimeout(function() {
  112. that.loading = true
  113. }, 2000);
  114. that.seckillList = [],
  115. that.page = 1
  116. that.status = that.timeList[that.active].status
  117. that.getSeckillList();
  118. }
  119. });
  120. },
  121. getSeckillList: function() {
  122. var that = this;
  123. var data = {
  124. page: that.page,
  125. limit: that.limit
  126. };
  127. if (that.loadend) return;
  128. if (that.pageloading) return;
  129. this.pageloading = true
  130. getSeckillList(that.timeList[that.active].id, data).then(res => {
  131. var seckillList = res.data;
  132. var loadend = seckillList.length < that.limit;
  133. that.page++;
  134. that.seckillList = that.seckillList.concat(seckillList),
  135. that.page = that.page;
  136. that.pageloading = false;
  137. that.loadend = loadend;
  138. }).catch(err => {
  139. that.pageloading = false
  140. });
  141. },
  142. settimeList: function(item, index) {
  143. var that = this;
  144. this.active = index
  145. if (that.interval) {
  146. clearInterval(that.interval);
  147. that.interval = null
  148. }
  149. that.interval = 0,
  150. that.countDownHour = "00";
  151. that.countDownMinute = "00";
  152. that.countDownSecond = "00";
  153. that.status = that.timeList[that.active].status;
  154. that.loadend = false;
  155. that.page = 1;
  156. that.seckillList = [];
  157. // wxh.time(e.currentTarget.dataset.stop, that);
  158. that.getSeckillList();
  159. },
  160. goDetails(item){
  161. uni.navigateTo({
  162. url: '/pages/activity/goods_seckill_details/index?id=' + item.id + '&time=' + this.timeList[this.active].stop + '&status=' + this.status + '&time_id=' + this.timeList[this.active].id
  163. })
  164. }
  165. },
  166. /**
  167. * 页面上拉触底事件的处理函数
  168. */
  169. onReachBottom: function() {
  170. this.getSeckillList();
  171. }
  172. }
  173. </script>
  174. <style lang="scss">
  175. .style-add {
  176. width:auto;
  177. overflow:hidden;
  178. height:106rpx;
  179. }
  180. page {
  181. background-color: #F5F5F5 !important;
  182. }
  183. .no-goods{
  184. margin: 0 30rpx;
  185. background-color: #fff;
  186. text-align: center;
  187. padding: 20rpx 0 100rpx 0;
  188. color: #999;
  189. border-radius: 10rpx;
  190. image{
  191. width: 414rpx;
  192. height: 304rpx;
  193. margin: 40rpx auto 0 auto;
  194. display: block;
  195. }
  196. }
  197. .flash-sale .header {
  198. width: 710rpx;
  199. height: 300rpx;
  200. margin: -215rpx auto 0 auto;
  201. border-radius: 20rpx;
  202. }
  203. .flash-sale .header image {
  204. width: 100%;
  205. height: 100%;
  206. border-radius: 20rpx;
  207. }
  208. .flash-sale .seckillList {
  209. padding: 0 20rpx;
  210. }
  211. .flash-sale .seckillList .priceTag {
  212. width: 75rpx;
  213. height: 70rpx;
  214. }
  215. .flash-sale .seckillList .priceTag image {
  216. width: 100%;
  217. height: 100%;
  218. }
  219. .flash-sale .timeLsit {
  220. width: 610rpx;
  221. white-space: nowrap;
  222. margin: 10rpx 0;
  223. }
  224. .flash-sale .timeLsit .item {
  225. display: inline-block;
  226. font-size: 20rpx;
  227. color: #666;
  228. text-align: center;
  229. padding: 11rpx 0;
  230. box-sizing: border-box;
  231. height: 96rpx;
  232. margin-right: 35rpx;
  233. }
  234. .flash-sale .timeLsit .item .time {
  235. font-size: 36rpx;
  236. font-weight: 600;
  237. color: #333;
  238. }
  239. .flash-sale .timeLsit .item.on .time {
  240. color: var(--view-theme);
  241. }
  242. .flash-sale .timeLsit .item.on .state {
  243. width: 90rpx;
  244. height: 30rpx;
  245. border-radius: 15rpx;
  246. background: var(--view-theme);
  247. color: #fff;
  248. }
  249. .flash-sale .countDown {
  250. height: 92rpx;
  251. border-bottom: 1rpx solid #f0f0f0;
  252. margin-top: -14rpx;
  253. font-size: 28rpx;
  254. color: #282828;
  255. }
  256. .flash-sale .countDown .num {
  257. font-size: 28rpx;
  258. font-weight: bold;
  259. background-color: #ffcfcb;
  260. padding: 4rpx 7rpx;
  261. border-radius: 3rpx;
  262. }
  263. .flash-sale .countDown .text {
  264. font-size: 28rpx;
  265. color: #282828;
  266. margin-right: 13rpx;
  267. }
  268. .flash-sale .list .item {
  269. height: 230rpx;
  270. position: relative;
  271. width: 710rpx;
  272. margin: 0 auto 20rpx auto;
  273. background-color: #fff;
  274. border-radius: 20rpx;
  275. padding: 0 25rpx;
  276. }
  277. .flash-sale .list .item .pictrue {
  278. width: 180rpx;
  279. height: 180rpx;
  280. border-radius: 10rpx;
  281. position: relative;
  282. }
  283. .activityFrame{
  284. border-radius: 10rpx;
  285. }
  286. .flash-sale .list .item .pictrue image {
  287. width: 100%;
  288. height: 100%;
  289. border-radius: 10rpx;
  290. }
  291. .flash-sale .list .item .text {
  292. width: 460rpx;
  293. font-size: 30rpx;
  294. color: #333;
  295. height: 166rpx;
  296. }
  297. .flash-sale .list .item .text .name {
  298. width: 100%;
  299. }
  300. .flash-sale .list .item .text .money {
  301. font-size: 30rpx;
  302. color: #E93323;
  303. }
  304. .flash-sale .list .item .text .money .num {
  305. font-size: 40rpx;
  306. font-weight: 500;
  307. font-family: 'Guildford Pro';
  308. }
  309. .flash-sale .list .item .text .money .y_money {
  310. font-size: 24rpx;
  311. color: #999;
  312. text-decoration-line: line-through;
  313. margin-left: 15rpx;
  314. }
  315. .flash-sale .list .item .text .limit {
  316. font-size: 22rpx;
  317. color: #999;
  318. margin-bottom: 5rpx;
  319. }
  320. .flash-sale .list .item .text .limit .limitPrice {
  321. margin-left: 10rpx;
  322. }
  323. .flash-sale .list .item .text .progress {
  324. overflow: hidden;
  325. background-color: #FFEFEF;
  326. width: 260rpx;
  327. border-radius: 18rpx;
  328. height: 18rpx;
  329. position: relative;
  330. }
  331. .flash-sale .list .item .text .progress .bg-reds {
  332. width: 0;
  333. height: 100%;
  334. transition: width 0.6s ease;
  335. background: linear-gradient(90deg, rgba(233, 51, 35, 1) 0%, rgba(255, 137, 51, 1) 100%);
  336. }
  337. .flash-sale .list .item .text .progress .piece {
  338. position: absolute;
  339. left: 8%;
  340. transform: translate(0%, -50%);
  341. top: 49%;
  342. font-size: 16rpx;
  343. color: #FFB9B9;
  344. }
  345. .flash-sale .list .item .grab {
  346. font-size: 28rpx;
  347. color: #fff;
  348. width: 150rpx;
  349. height: 54rpx;
  350. border-radius: 27rpx;
  351. text-align: center;
  352. line-height: 54rpx;
  353. position: absolute;
  354. right: 30rpx;
  355. bottom: 30rpx;
  356. background: #bbbbbb;
  357. }
  358. .flash-sale .saleBox {
  359. width: 100%;
  360. height: 230rpx;
  361. background: var(--view-theme);
  362. border-radius: 0 0 50rpx 50rpx;
  363. }
  364. </style>