promotionList.vue 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346
  1. <template>
  2. <!-- 促销列表 -->
  3. <view class="index-product-wrapper" :class="iSshowH?'on':''" :style="'margin-top:'+mbConfig*2+'rpx;'" v-show="!isSortType">
  4. <view class="nav-bd">
  5. <scroll-view scroll-x="true" style="white-space: nowrap; display: flex" show-scrollbar="false">
  6. <view class="item" v-for="(item,index) in explosiveMoney" :index="index" @click="ProductNavTab(index)">
  7. <view class="txt" :style="{ 'color': index==ProductNavindex ? themeColor : txtColor }">{{item.chiild[0].val}}</view>
  8. <view class="label" :style="{ 'background': index==ProductNavindex ? themeColor : '','color': index==ProductNavindex ? '#fff' : infoColor }" v-if="item.chiild[1].val">{{item.chiild[1].val}}</view>
  9. </view>
  10. </scroll-view>
  11. </view>
  12. <view class="list-box animated" :class='tempArr.length > 0?"fadeIn on":""'>
  13. <view class="item" v-for="(item,index) in tempArr" :key="index" @click="goDetail(item)">
  14. <view class="pictrue">
  15. <span class="pictrue_log pictrue_log_class" :style="'background-color:'+labelColor" v-if="item.activity && item.activity.type === '1'">秒杀</span>
  16. <span class="pictrue_log pictrue_log_class" :style="'background-color:'+labelColor" v-if="item.activity && item.activity.type === '2'">砍价</span>
  17. <span class="pictrue_log pictrue_log_class" :style="'background-color:'+labelColor" v-if="item.activity && item.activity.type === '3'">拼团</span>
  18. <image :src="item.image" mode="aspectFill" v-if="!productVideoStatus || !item.video_link"></image>
  19. <!-- #ifndef APP-PLUS -->
  20. <video
  21. v-if="productVideoStatus && item.video_link"
  22. :src="item.video_link"
  23. :controls="false"
  24. :show-center-play-btn="false"
  25. :id="`video${item.id}`"
  26. :poster="item.image"
  27. objectFit="cover"
  28. :autoplay="autoplay"
  29. class="video"
  30. loop
  31. muted
  32. ></video>
  33. <!-- #endif -->
  34. <view class="activityFrame" v-if="item.activity_frame.image" :style="'background-image: url('+item.activity_frame.image+');'"></view>
  35. </view>
  36. <view class="text-info">
  37. <view class="title line1" v-if="titleShow">{{item.store_name}}</view>
  38. <!-- #ifdef H5 || APP-PLUS -->
  39. <slot name="center" :item="item"></slot>
  40. <!-- #endif -->
  41. <!-- #ifdef MP -->
  42. <slot name="center{{index}}"></slot>
  43. <!-- #endif -->
  44. <view class="old-price" v-if="opriceShow"><text>¥</text>{{item.ot_price}}</view>
  45. <view class="price" :style="{color:fontColor}">
  46. <view v-if="priceShow">
  47. <text></text>{{item.price}}
  48. </view>
  49. <view class="txt" :style="'border:1px solid '+labelColor+';color:'+labelColor" :class="priceShow?'':'on'" v-if="item.checkCoupon && couponShow"></view>
  50. </view>
  51. </view>
  52. </view>
  53. </view>
  54. </view>
  55. </template>
  56. <script>
  57. import {
  58. getProductslist
  59. } from '@/api/store.js';
  60. export default {
  61. name: 'promotionList',
  62. props: {
  63. dataConfig: {
  64. type: Object,
  65. default: () => {}
  66. },
  67. isSortType:{
  68. type: String | Number,
  69. default:0
  70. },
  71. productVideoStatus:{
  72. type: Boolean,
  73. default: false
  74. }
  75. },
  76. data() {
  77. return {
  78. tempArr: [],
  79. iSshowH: false,
  80. ProductNavindex: 0,
  81. explosiveMoney: this.dataConfig.tabConfig.list,
  82. // imgStyle: this.dataConfig.imgStyle.type,
  83. mbConfig: this.dataConfig.mbConfig.val,
  84. themeColor: this.dataConfig.themeColor.color[0].item,
  85. titleShow: this.dataConfig.titleShow.val, //标题是否显示
  86. opriceShow: this.dataConfig.opriceShow.val, //原价是否显示
  87. priceShow: this.dataConfig.priceShow.val, //价格是否显示
  88. couponShow: this.dataConfig.couponShow.val,//优惠券标签是否显示
  89. // titleConfig: this.dataConfig.titleConfig.type, //标题位置
  90. fontColor: this.dataConfig.fontColor.color?this.dataConfig.fontColor.color[0].item:'',
  91. labelColor: this.dataConfig.labelColor.color?this.dataConfig.labelColor.color[0].item:'',
  92. txtColor: this.dataConfig.txtColor.color?this.dataConfig.txtColor.color[0].item:'',
  93. infoColor: this.dataConfig.infoColor.color?this.dataConfig.infoColor.color[0].item:'',
  94. // goodType: this.dataConfig.tabConfig.list[0].link.activeVal || 3,
  95. limit: this.$config.LIMIT,
  96. canPlay: false,
  97. autoplay: false
  98. // product_video_status: false
  99. };
  100. },
  101. watch: {
  102. tempArr() {
  103. // #ifndef APP-PLUS
  104. this.$nextTick(() => {
  105. if (this.productVideoStatus) {
  106. uni.getNetworkType({
  107. success: (res) => {
  108. if (['wifi', 'unknown'].includes(res.networkType)) {
  109. // 监听
  110. this.observeVideo();
  111. }
  112. if (['2g', '3g', '4g', '5g'].includes(res.networkType)) {
  113. if (this.$store.state.app.autoplay) {
  114. // 监听
  115. this.observeVideo();
  116. } else{
  117. this.$eventHub.$emit('confirm_video_status');
  118. }
  119. }
  120. }
  121. });
  122. }
  123. });
  124. // #endif
  125. }
  126. },
  127. created() {
  128. // #ifndef APP-PLUS
  129. // this.$eventHub.$on('product_video_status', result => {
  130. // this.product_video_status = result;
  131. // });
  132. this.$eventHub.$on('product_video_observe', () => {
  133. this.observeVideo();
  134. });
  135. // #endif
  136. this.productslist();
  137. },
  138. mounted(){
  139. },
  140. methods: {
  141. observeVideo() {
  142. this.autoplay = true;
  143. // let observer = uni.createIntersectionObserver(this, { observeAll: true });
  144. // observer.relativeToViewport().observe('.video', res => {
  145. // if (res.intersectionRatio) {
  146. // console.log('66666666');
  147. // uni.createVideoContext(res.id, this).play();
  148. // } else{
  149. // uni.createVideoContext(res.id, this).pause();
  150. // }
  151. // });
  152. },
  153. // 促销列表的点击事件;
  154. changeTab() {
  155. this.tempArr = [];
  156. let onloadH = true;
  157. this.productslist(onloadH);
  158. },
  159. productslist(onloadH) {
  160. let list = this.explosiveMoney[this.ProductNavindex];
  161. let limit = this.$config.LIMIT;
  162. let data = {};
  163. if (list.tabVal == 1) {
  164. data = {
  165. ids: list.goodsList.ids.join(','),
  166. };
  167. } else {
  168. data = {
  169. priceOrder: list.goodsSort == 2 ? 'desc' : '',
  170. salesOrder: list.goodsSort == 1 ? 'desc' : '',
  171. selectId: list.selectConfig.activeValue[list.selectConfig.activeValue.length-1] || 0,
  172. store_label_id: list.goodsLabel.activeValue.join(',') || '',
  173. limit: list.numConfig.val
  174. };
  175. }
  176. if (onloadH) {
  177. this.$set(this, 'iSshowH', true);
  178. }
  179. getProductslist(data).then(res => {
  180. this.$set(this, 'iSshowH', false);
  181. this.tempArr = res.data;
  182. });
  183. },
  184. // 首发新品切换
  185. ProductNavTab(index) {
  186. this.ProductNavindex = index;
  187. this.changeTab();
  188. },
  189. goDetail(item){
  190. this.$emit('detail',item);
  191. }
  192. }
  193. }
  194. </script>
  195. <style lang="scss">
  196. // 这里可以自行配置
  197. $border-radius: 10px;
  198. .index-product-wrapper {
  199. margin: 30rpx 20rpx 0 20rpx;
  200. &.on {
  201. min-height: 1500rpx;
  202. }
  203. .nav-bd {
  204. display: flex;
  205. align-items: center;
  206. margin-top: 30rpx;
  207. .item {
  208. // display: flex;
  209. // flex-direction: column;
  210. // align-items: center;
  211. // justify-content: center;
  212. width: 25%;
  213. display: inline-block;
  214. text-align: center;
  215. &.on{
  216. border-radius: 0;
  217. }
  218. .txt {
  219. font-size: 32rpx;
  220. color: #282828;
  221. }
  222. .label {
  223. display: flex;
  224. align-items: center;
  225. justify-content: center;
  226. width: 124rpx;
  227. height: 32rpx;
  228. margin: 5rpx auto 0 auto;
  229. font-size: 24rpx;
  230. color: #999;
  231. border-radius: 16rpx;
  232. }
  233. }
  234. }
  235. .list-box {
  236. display: flex;
  237. flex-wrap: wrap;
  238. justify-content: space-between;
  239. margin-top: 30rpx;
  240. .item {
  241. width: 345rpx;
  242. margin-bottom: 20rpx;
  243. background-color: #fff;
  244. border-radius: $border-radius;
  245. overflow: hidden;
  246. position: relative;
  247. .pictrue{
  248. position: relative;
  249. width: 100%;
  250. height: 345rpx;
  251. overflow: hidden;
  252. }
  253. .pictrue_log {
  254. width: 92rpx;
  255. height: 44rpx;
  256. font-size: 26rpx;
  257. line-height: 44rpx;
  258. }
  259. image {
  260. width: 100%;
  261. height: 345rpx;
  262. display: block;
  263. }
  264. .activityFrame {
  265. border-radius: $border-radius $border-radius 0 0;
  266. }
  267. .video {
  268. position: absolute;
  269. top: 0;
  270. left: 0;
  271. width: 100%;
  272. height: 346rpx;
  273. border-radius: $border-radius $border-radius 0 0;
  274. }
  275. .text-info {
  276. padding: 10rpx 20rpx 15rpx;
  277. .title {
  278. color: #222222;
  279. }
  280. .old-price {
  281. margin-top: 4rpx;
  282. font-size: 26rpx;
  283. color: #AAAAAA;
  284. text-decoration: line-through;
  285. text {
  286. margin-right: 2px;
  287. font-size: 20rpx;
  288. }
  289. }
  290. .price {
  291. display: flex;
  292. align-items: flex-end;
  293. font-size: 36rpx;
  294. font-weight: 550;
  295. text {
  296. padding-bottom: 4rpx;
  297. font-size: 26rpx;
  298. font-weight: normal;
  299. }
  300. .txt {
  301. display: flex;
  302. align-items: center;
  303. justify-content: center;
  304. width: 28rpx;
  305. height: 28rpx;
  306. margin-left: 15rpx;
  307. margin-bottom: 10rpx;
  308. border-radius: 4rpx;
  309. font-size: 20rpx;
  310. font-weight: normal;
  311. &.on{
  312. margin-left: 0;
  313. }
  314. }
  315. }
  316. }
  317. }
  318. &.on {
  319. display: flex;
  320. }
  321. }
  322. }
  323. </style>