combination.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292
  1. <template>
  2. <!-- 拼团活动 -->
  3. <view v-show="!isSortType">
  4. <view class="group-wrapper" :class="conStyle?'borderRadius20':''" :style="'background:'+bgColor+';margin:0 '+prConfig*2+'rpx;margin-top:'+ mbConfig*2 +'rpx;'" v-if="combinationList.length>0">
  5. <view class="hd">
  6. <view class="left">
  7. <image :src="imgUrl" mode=""v-if="imgUrl" class="icon"></image>
  8. <image src="/static/images/group02.gif" class="icon" v-else></image>
  9. <view class="name" :style="'color:'+titleColor">拼团活动</view>
  10. <!-- <image src="/static/images/group01.png" class="title"></image> -->
  11. <view class="person">
  12. <view class="avatar-box">
  13. <block v-for="(item,index) in pinkInfo.avatars" :key="index">
  14. <image :src="item" mode=""></image>
  15. </block>
  16. </view>
  17. <view class="num" v-if="pinkInfo.pink_count>0">{{pinkInfo.pink_count}}人拼团成功</view>
  18. </view>
  19. </view>
  20. <navigator class="more" url="/pages/activity/goods_combination/index" hover-class="none">更多 <text class="iconfont icon-jiantou"></text></navigator>
  21. </view>
  22. <view class="group-scroll">
  23. <scroll-view scroll-x="true" class="scroll" show-scrollbar="false">
  24. <view class="group-item" :style="'margin-right:'+ lrConfig*2 +'rpx;'" v-for="(item,index) in combinationList" :key="index"
  25. @click="goDetail(item)">
  26. <image :src="item.image" mode="aspectFill"></image>
  27. <view class="people" v-if="joinShow">{{item.people}}人参团</view>
  28. <view class="info">
  29. <view class="name line1" v-if="titleShow">{{item.title}}</view>
  30. <!-- #ifdef H5 || APP-PLUS -->
  31. <slot name="center" :item="item"></slot>
  32. <!-- #endif -->
  33. <!-- #ifdef MP -->
  34. <slot name="center{{index}}"></slot>
  35. <!-- #endif -->
  36. <view class="price-box">
  37. <text v-if="pinkShow" class="tips" :style="'background-color:'+txtColor+';color:'+themeColor+';'">拼团价</text>
  38. <text v-if="priceShow" class="price" :style="'color:'+fontColor+';'"><text></text>{{item.price}}</text>
  39. </view>
  40. </view>
  41. <view v-if="bntShow" class="bom-btn" :style="'background-color:'+themeColor+';'">参与拼团</view>
  42. </view>
  43. </scroll-view>
  44. </view>
  45. </view>
  46. </view>
  47. </template>
  48. <script>
  49. import {
  50. pink
  51. } from '@/api/api.js';
  52. import {
  53. getCombinationList
  54. } from '@/api/activity.js';
  55. import {
  56. openPinkSubscribe
  57. } from '@/utils/SubscribeMessage.js';
  58. export default {
  59. name: 'combination',
  60. props: {
  61. dataConfig: {
  62. type: Object,
  63. default: () => {}
  64. },
  65. isSortType:{
  66. type: String | Number,
  67. default:0
  68. }
  69. },
  70. data() {
  71. return {
  72. pinkInfo: '',
  73. combinationList: [],
  74. numConfig:this.dataConfig.numConfig.val,
  75. txtColor:this.dataConfig.txtColor.color[0].item,
  76. themeColor:this.dataConfig.themeColor.color[0].item,
  77. mbConfig:this.dataConfig.mbConfig.val,
  78. lrConfig:this.dataConfig.lrConfig.val,
  79. imgUrl:this.dataConfig.imgConfig.url,
  80. priceShow:this.dataConfig.priceShow.val,//是否显示价格
  81. bntShow:this.dataConfig.bntShow.val,//是否显示按钮
  82. titleShow:this.dataConfig.titleShow.val,//是否显示标题
  83. pinkShow:this.dataConfig.pinkShow.val,//是否显示拼团标签
  84. joinShow:this.dataConfig.joinShow.val,//是否显示参团标签
  85. prConfig:this.dataConfig.prConfig.val,
  86. bgColor:this.dataConfig.bgColor.color[0].item,
  87. conStyle:this.dataConfig.conStyle.type,
  88. fontColor:this.dataConfig.fontColor.color[0].item,
  89. titleColor:this.dataConfig.titleColor.color[0].item
  90. };
  91. },
  92. created() {
  93. },
  94. mounted() {
  95. this.pink();
  96. this.getCombinationList();
  97. },
  98. methods: {
  99. goDetail(item){
  100. // #ifndef MP
  101. uni.navigateTo({
  102. url:`/pages/activity/goods_combination_details/index?id=${item.id}`
  103. })
  104. // #endif
  105. // #ifdef MP
  106. openPinkSubscribe().then(res=>{
  107. uni.navigateTo({
  108. url:`/pages/activity/goods_combination_details/index?id=${item.id}`
  109. })
  110. })
  111. // #endif
  112. },
  113. // 拼团列表
  114. getCombinationList: function() {
  115. let that = this;
  116. let limit = that.$config.LIMIT;
  117. let data = {
  118. page: 1,
  119. limit: that.numConfig>=limit?limit:that.numConfig
  120. };
  121. getCombinationList(data).then(function(res) {
  122. that.combinationList = res.data;
  123. }).catch((res) => {
  124. return that.$util.Tips({
  125. title: res
  126. });
  127. })
  128. },
  129. // 拼团数据(拼团人数头部图片)
  130. pink: function() {
  131. pink().then(res => {
  132. this.pinkInfo = res.data
  133. })
  134. }
  135. }
  136. }
  137. </script>
  138. <style lang="scss">
  139. .scroll {
  140. white-space: nowrap;
  141. display: flex;
  142. }
  143. .group-wrapper {
  144. padding: 20rpx 20rpx 26rpx 20rpx;
  145. background: #fff;
  146. .hd {
  147. display: flex;
  148. align-items: center;
  149. justify-content: space-between;
  150. .left {
  151. display: flex;
  152. align-items: center;
  153. .name{
  154. font-size: 32rpx;
  155. font-weight: 600;
  156. }
  157. .icon {
  158. width: 36rpx;
  159. height: 36rpx;
  160. margin-right: 12rpx;
  161. }
  162. .title {
  163. width: 134rpx;
  164. height: 33rpx;
  165. }
  166. .person {
  167. display: flex;
  168. align-items: center;
  169. margin-left: 40rpx;
  170. .avatar-box {
  171. display: flex;
  172. align-items: center;
  173. image {
  174. width: 30rpx;
  175. height: 30rpx;
  176. border-radius: 50%;
  177. margin-right: -10rpx;
  178. }
  179. }
  180. .num {
  181. margin-left: 18rpx;
  182. font-size: 26rpx;
  183. color: #999999;
  184. }
  185. }
  186. }
  187. .more {
  188. font-size: 26rpx;
  189. color: #999;
  190. .iconfont {
  191. margin-left: 6rpx;
  192. font-size: 25rpx;
  193. }
  194. }
  195. }
  196. .group-scroll {
  197. width: 100%;
  198. margin-top: 25rpx;
  199. .group-item {
  200. display: inline-block;
  201. width: 220rpx;
  202. box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.03);
  203. border-radius: 16rpx;
  204. position: relative;
  205. background-color: #fff;
  206. .people {
  207. position: absolute;
  208. width: 140rpx;
  209. height: 32rpx;
  210. background: rgba(0, 0, 0, 0.3);
  211. box-shadow: 2rpx 2rpx 8rpx 0 rgba(0, 0, 0, 0.06);
  212. border-radius: 16rpx;
  213. top: 12rpx;
  214. left: 12rpx;
  215. font-size: 20rpx;
  216. color: #fff;
  217. text-align: center;
  218. line-height: 32rpx;
  219. }
  220. image {
  221. width: 100%;
  222. height: 220rpx;
  223. border-radius: 16rpx 16rpx 0 0;
  224. }
  225. .info {
  226. padding: 2rpx 12rpx 10rpx 12rpx;
  227. .name {
  228. font-size: 24rpx;
  229. }
  230. .price-box {
  231. display: flex;
  232. align-items: center;
  233. margin-top: 6rpx;
  234. .tips {
  235. display: flex;
  236. align-items: center;
  237. justify-content: center;
  238. width: 76rpx;
  239. height: 30rpx;
  240. margin-right: 6rpx;
  241. border-radius: 2px;
  242. font-size: 18rpx;
  243. }
  244. .price {
  245. font-size: 28rpx;
  246. font-weight: 700;
  247. text {
  248. font-size: 18rpx;
  249. }
  250. }
  251. }
  252. }
  253. .bom-btn {
  254. display: flex;
  255. align-items: center;
  256. justify-content: center;
  257. width: 100%;
  258. height: 48rpx;
  259. border-radius: 0px 0px 16rpx 16rpx;
  260. color: #fff;
  261. font-size: 24rpx;
  262. }
  263. }
  264. }
  265. }
  266. </style>