bargain.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  1. <template>
  2. <!-- 砍价列表 -->
  3. <view v-show="!isSortType" :style="{padding:'0 '+prConfig*2+'rpx'}">
  4. <view class="barg" :class="bgStyle===0?'':'borderRadius15'" :style="'background: linear-gradient(180deg, '+ bgColor[0].item +' 0%, '+ bgColor[1].item +' 100%);margin-top:' + mbCongfig*2 +'rpx;'" v-if="bargList.length>0">
  5. <view class="title" :style="'color:'+titleColor+';'">
  6. 砍价专区·BARGAINING
  7. <!-- <image src="/static/images/barg001.png" mode=""></image> -->
  8. </view>
  9. <view class="barg-swiper">
  10. <scroll-view scroll-x="true" class="barg-scroll" show-scrollbar="true">
  11. <view class="wrapper">
  12. <block v-for="(item,index) in bargList" :key="index">
  13. <view class='list-box' :style="'margin-right:'+productGap*2+'rpx;'" @click="bargDetail(item)">
  14. <image :src="item.image" mode="aspectFill" class="slide-image"></image>
  15. <view class="info-txt" v-if="priceShow||bntShow">
  16. <view v-if="priceShow" class="price" :style="'color:'+fontColor+';'"><text></text>{{item.price}}</view>
  17. <!-- #ifdef H5 || APP-PLUS -->
  18. <slot name="center" :item="item"></slot>
  19. <!-- #endif -->
  20. <!-- #ifdef MP -->
  21. <slot name="center{{index}}"></slot>
  22. <!-- #endif -->
  23. <view v-if="bntShow" class="txt" :style="'background-color:'+ themeColor +';'">立即砍价</view>
  24. </view>
  25. </view>
  26. </block>
  27. <navigator url="/pages/activity/goods_bargain/index" hover-class="none" class="more-box">
  28. <view class="txt">查看更多</view>
  29. <image src="/static/images/mores.png"></image>
  30. </navigator>
  31. </view>
  32. </scroll-view>
  33. </view>
  34. </view>
  35. </view>
  36. </template>
  37. <script>
  38. import {
  39. getBargainList
  40. } from '@/api/activity.js';
  41. import {
  42. openBargainSubscribe
  43. } from '@/utils/SubscribeMessage.js';
  44. export default {
  45. name: 'bargain',
  46. props: {
  47. dataConfig: {
  48. type: Object,
  49. default: () => {}
  50. },
  51. isSortType:{
  52. type: String | Number,
  53. default:0
  54. }
  55. },
  56. data() {
  57. return {
  58. bargList: [],
  59. numConfig: this.dataConfig.numConfig.val,//显示砍价列表数量
  60. themeColor: this.dataConfig.themeColor.color[0].item,//主题颜色
  61. titleColor: this.dataConfig.titleColor.color[0].item,//标题颜色
  62. bgColor: this.dataConfig.bgColor.color,//背景颜色
  63. mbCongfig: this.dataConfig.mbCongfig.val,
  64. productGap: this.dataConfig.productGap.val,
  65. priceShow: this.dataConfig.priceShow.val, //是否显示价格
  66. bntShow: this.dataConfig.bntShow.val, //是否显示按钮
  67. bgStyle: this.dataConfig.bgStyle.type,//设置背景样式
  68. prConfig: this.dataConfig.prConfig.val,//设置背景边距
  69. fontColor:this.dataConfig.fontColor.color[0].item,
  70. };
  71. },
  72. created() {},
  73. mounted() {
  74. this.getBargainList();
  75. },
  76. methods: {
  77. // 砍价列表
  78. getBargainList() {
  79. let limit = this.$config.LIMIT;
  80. getBargainList({
  81. page: 1,
  82. limit: this.numConfig>=limit?limit:this.numConfig
  83. }).then(res => {
  84. this.bargList = res.data
  85. })
  86. },
  87. bargDetail(item){
  88. // #ifndef MP
  89. this.$emit('changeBarg', item);
  90. // #endif
  91. // #ifdef MP
  92. openBargainSubscribe().then(res=>{
  93. this.$emit('changeBarg', item);
  94. })
  95. // #endif
  96. }
  97. }
  98. }
  99. </script>
  100. <style lang="scss">
  101. .barg-scroll {
  102. white-space: nowrap;
  103. display: flex;
  104. }
  105. .barg {
  106. padding-bottom: 32rpx;
  107. padding-left: 20rpx;
  108. background:linear-gradient(180deg,rgba(253,219,178,1) 0%,rgba(253,239,198,1) 100%);
  109. background-size: 100% 100%;
  110. box-sizing: border-box;
  111. .title {
  112. display: flex;
  113. align-items: center;
  114. justify-content: center;
  115. padding-top: 42rpx;
  116. font-size: 38rpx;
  117. color: #FF6000;
  118. font-weight: bold;
  119. image {
  120. width: 463rpx;
  121. height: 39rpx;
  122. }
  123. }
  124. .barg-swiper {
  125. margin-top: 43rpx;
  126. padding-right: 20rpx;
  127. .wrapper {
  128. display: flex;
  129. }
  130. .list-box {
  131. flex-shrink: 0;
  132. width: 210rpx;
  133. background-color: #fff;
  134. border-radius: 16rpx;
  135. overflow: hidden;
  136. margin-right: 20rpx;
  137. image {
  138. width: 100%;
  139. height: 210rpx;
  140. }
  141. .info-txt {
  142. width: 100%;
  143. display: flex;
  144. flex-direction: column;
  145. align-items: center;
  146. justify-content: center;
  147. padding-top: 4rpx;
  148. padding-bottom: 18rpx;
  149. .price {
  150. font-weight: 700;
  151. color: $theme-color;
  152. font-size: 28rpx;
  153. text{
  154. font-size: 18rpx;
  155. }
  156. }
  157. .txt {
  158. display: flex;
  159. align-items: center;
  160. justify-content: center;
  161. width: 136rpx;
  162. height: 33rpx;
  163. margin-top: 10rpx;
  164. border-radius: 17px;
  165. font-size: 18rpx;
  166. color: #fff;
  167. }
  168. }
  169. }
  170. .more-box {
  171. flex-shrink: 0;
  172. display: flex;
  173. flex-direction: column;
  174. align-items: center;
  175. justify-content: center;
  176. width: 80rpx;
  177. background-color: #fff;
  178. border-radius: 16rpx;
  179. image {
  180. width: 24rpx;
  181. height: 24rpx;
  182. margin-top: 10rpx;
  183. }
  184. .txt {
  185. display: block;
  186. writing-mode: vertical-lr;
  187. font-size: 26rpx;
  188. line-height: 1.2;
  189. }
  190. }
  191. }
  192. }
  193. </style>