index.vue 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355
  1. <template>
  2. <!-- 拼团活动模块 -->
  3. <view class="group-list" :style="colorStyle">
  4. <view class="swiper" v-if="bannerList.length">
  5. <swiper indicator-dots="true" :autoplay="true" :circular="circular"
  6. :interval="interval" :duration="duration" indicator-color="rgba(0,0,0,0.3)">
  7. <block v-for="(item,index) in bannerList" :key="index">
  8. <swiper-item>
  9. <view @click="goDetail(item)" class='slide-navigator acea-row row-between-wrapper'>
  10. <image :src="item.img" class="slide-image"></image>
  11. </view>
  12. </swiper-item>
  13. </block>
  14. </swiper>
  15. </view>
  16. <view class="groupMember acea-row row-center-wrapper">
  17. <view class="line"><image src="../static/groupLine.png"></image></view>
  18. <view class="member acea-row row-center-wrapper">
  19. <view class="pictrue" v-for="(item,index) in pinkPeople" :key="index" v-if="index<6"><image :src="item"></image></view>
  20. <text class="ml10">{{pinkCount}}人参与</text>
  21. <view class="pictrue" v-if="pinkPeople.length>5">
  22. <image :src="pinkPeople[pinkPeople.length-1]"></image>
  23. <view class="iconfont icon-gengduo1"></view>
  24. </view>
  25. </view>
  26. <view class="line right"><image src="../static/groupLine.png"></image></view>
  27. </view>
  28. <view class="list">
  29. <view class="item acea-row row-between-wrapper" v-for="(item,index) in combinationList" :key='index' @tap="openSubcribe(item)">
  30. <view class="pictrue"><image :src="item.image"></image></view>
  31. <view class="text">
  32. <view class="name line2">{{item.title}}</view>
  33. <view class="bottom acea-row row-between row-bottom">
  34. <view class="y_money">
  35. <view class="price">{{item.product_price}}</view>
  36. <view class="money"><text class="num">{{item.price}}</text></view>
  37. </view>
  38. <view class="bnt acea-row row-center-wrapper" v-if="item.stock>0&&item.quota>0">
  39. <view class="light"><image src="../static/lightning.png"></image></view>
  40. <view class="num">{{item.people}}人团</view>
  41. <view class="go">去拼团</view>
  42. </view>
  43. <view class="bnt gray acea-row row-center-wrapper" v-else>已售罄</view>
  44. </view>
  45. </view>
  46. </view>
  47. </view>
  48. <view class="no-goods" :class="bannerList.length?'':'on'" v-if="!combinationList.length && !loading && isBanner">
  49. <image :src="imgHost + '/statics/images/no-thing.png'" mode=""></image>
  50. <text class="tip">暂无拼团商品,去看看其他商品吧~</text>
  51. </view>
  52. <home v-if="navigation"></home>
  53. </view>
  54. </template>
  55. <script>
  56. import {
  57. getCombinationList,getCombinationBannerList,getPink
  58. } from '@/api/activity.js';
  59. import {
  60. openPinkSubscribe
  61. } from '../../../utils/SubscribeMessage.js';
  62. import home from '@/components/home/index.vue'
  63. import colors from "@/mixins/color";
  64. import {HTTP_REQUEST_URL} from '@/config/app';
  65. let app = getApp();
  66. export default {
  67. components: {
  68. home
  69. },
  70. mixins: [colors],
  71. data() {
  72. return {
  73. pinkPeople:[],
  74. pinkCount:0,
  75. bannerList:[],
  76. circular: true,
  77. autoplay: true,
  78. interval: 3000,
  79. duration: 500,
  80. combinationList: [],
  81. limit: 10,
  82. page: 1,
  83. loading: false,
  84. loadend: false,
  85. isBanner: false,
  86. imgHost:HTTP_REQUEST_URL
  87. }
  88. },
  89. onLoad() {
  90. uni.setNavigationBarTitle({
  91. title:"拼团列表"
  92. })
  93. this.getCombinationList();
  94. this.getBannerList();
  95. this.getPink();
  96. },
  97. onShow(){
  98. uni.removeStorageSync('form_type_cart');
  99. },
  100. methods: {
  101. getPink:function(){
  102. getPink({type:2}).then(res=>{
  103. this.pinkPeople = res.data.avatars;
  104. this.pinkCount = res.data.pink_count;
  105. })
  106. },
  107. getBannerList: function(){
  108. getCombinationBannerList().then(res=>{
  109. this.bannerList = res.data;
  110. this.isBanner = true;
  111. })
  112. },
  113. goDetail(item) {
  114. let url = item.link;
  115. this.$util.JumpPath(url);
  116. },
  117. openSubcribe: function(item) {
  118. let page = item;
  119. // #ifndef MP
  120. uni.navigateTo({
  121. url: `/pages/activity/goods_combination_details/index?id=${item.id}`
  122. });
  123. // #endif
  124. // #ifdef MP
  125. uni.showLoading({
  126. title: '正在加载',
  127. })
  128. openPinkSubscribe().then(res => {
  129. uni.hideLoading();
  130. uni.navigateTo({
  131. url: `/pages/activity/goods_combination_details/index?id=${item.id}`
  132. });
  133. }).catch(() => {
  134. uni.hideLoading();
  135. });
  136. // #endif
  137. },
  138. getCombinationList: function() {
  139. var that = this;
  140. if (that.loadend) return;
  141. if (that.loading) return;
  142. var data = {
  143. page: that.page,
  144. limit: that.limit
  145. };
  146. this.loading = true
  147. getCombinationList(data).then(function(res) {
  148. var combinationList = that.combinationList;
  149. var limit = that.limit;
  150. that.page++;
  151. that.loadend = limit > res.data.length;
  152. that.combinationList = combinationList.concat(res.data);
  153. that.page = that.data.page;
  154. that.loading = false;
  155. }).catch(() => {
  156. that.loading = false
  157. })
  158. },
  159. },
  160. onReachBottom: function() {
  161. this.getCombinationList();
  162. },
  163. }
  164. </script>
  165. <style lang="scss">
  166. .ml10 {
  167. margin-left: 10rpx;
  168. }
  169. page {
  170. // background-color: var(--view-theme) !important;
  171. }
  172. .no-goods{
  173. margin: 0 30rpx;
  174. background-color: #fff;
  175. text-align: center;
  176. padding: 20rpx 0 100rpx 0;
  177. color: #999;
  178. border-radius: 10rpx;
  179. height: calc(100vh - 500rpx);
  180. box-sizing: border-box;
  181. &.on{
  182. height: calc(100vh - 200rpx);
  183. }
  184. image{
  185. width: 414rpx;
  186. height: 304rpx;
  187. margin: 40rpx auto 0 auto;
  188. display: block;
  189. }
  190. }
  191. .group-list{
  192. min-height: 100vh;
  193. background-color: var(--view-theme) !important;
  194. padding: 30rpx 0;
  195. .swiper{
  196. width: 100%;
  197. position: relative;
  198. box-sizing: border-box;
  199. padding: 0 30rpx;
  200. swiper{
  201. width: 100%;
  202. height: 300rpx;
  203. .slide-image{
  204. width: 100%;
  205. height: 300rpx;
  206. border-radius: 20rpx;
  207. }
  208. /deep/.uni-swiper-dot {
  209. width: 8rpx !important;
  210. height: 8rpx !important;
  211. border-radius: 50%;
  212. }
  213. /deep/.uni-swiper-dot-active{
  214. width: 18rpx !important;
  215. border-radius: 4rpx;
  216. background-color: var(--view-theme) !important;
  217. }
  218. }
  219. }
  220. .groupMember{
  221. height: 100rpx;
  222. .line{
  223. width: 102rpx;
  224. height: 4rpx;
  225. &.right{
  226. transform:rotate(180deg);
  227. }
  228. image{
  229. width: 100%;
  230. height: 100%;
  231. display: block;
  232. }
  233. }
  234. .member{
  235. margin: 0 30rpx;
  236. color: #fff;
  237. .pictrue{
  238. width: 46rpx;
  239. height: 46rpx;
  240. position: relative;
  241. image{
  242. border:2rpx solid #fff;
  243. width: 100%;
  244. height: 100%;
  245. border-radius: 50%;
  246. }
  247. &~.pictrue{
  248. margin-left: -8rpx;
  249. }
  250. .iconfont{
  251. position: absolute;
  252. width: 43rpx;
  253. height: 43rpx;
  254. background: rgba(51, 51, 51, 0.6);
  255. border-radius: 50%;
  256. top: 2rpx;
  257. left:2rpx;
  258. color: #fff;
  259. font-size: 10rpx;
  260. text-align: center;
  261. line-height: 43rpx;
  262. }
  263. }
  264. }
  265. }
  266. .list{
  267. .item{
  268. width: 690rpx;
  269. height: 230rpx;
  270. background-color: #fff;
  271. border-radius: 14rpx;
  272. padding: 0 22rpx;
  273. margin: 0 auto 18rpx auto;
  274. .pictrue{
  275. width: 186rpx;
  276. height: 186rpx;
  277. image{
  278. width: 100%;
  279. height: 100%;
  280. border-radius: 10rpx;
  281. }
  282. }
  283. .text{
  284. width: 440rpx;
  285. .name{
  286. color: #333;
  287. font-size: 30rpx;
  288. height: 82rpx;
  289. line-height: 41rpx;
  290. }
  291. .bottom{
  292. margin-top: 10rpx;
  293. .y_money{
  294. font-size: 24rpx;
  295. color: #999;
  296. .price{
  297. text-decoration: line-through;
  298. }
  299. .money{
  300. color: var(--view-priceColor);
  301. font-weight: 600;
  302. .num{
  303. font-size: 34rpx;
  304. }
  305. }
  306. }
  307. .bnt{
  308. height: 58rpx;
  309. font-size: 24rpx;
  310. text-align: center;
  311. position: relative;
  312. background-color: var(--view-theme);
  313. border-radius: 28rpx;
  314. .light{
  315. position: absolute;
  316. width: 28rpx;
  317. height: 58rpx;
  318. top:0;
  319. left:50%;
  320. margin-left: -8rpx;
  321. image{
  322. width: 100%;
  323. height: 100%;
  324. }
  325. }
  326. .num{
  327. width: 120rpx;
  328. background-color: rgba(255,255,255,0.85);
  329. color: var(--view-theme);
  330. height: 100%;
  331. line-height: 58rpx;
  332. border-radius: 28rpx 0 14rpx 28rpx;
  333. }
  334. .go{
  335. width: 112rpx;
  336. background-color: var(--view-theme);
  337. height: 100%;
  338. line-height: 58rpx;
  339. border-radius: 0 28rpx 28rpx 0;
  340. color: #fff;
  341. }
  342. &.gray{
  343. width: 148rpx;
  344. background-color: #cccccc;
  345. color: #fff;
  346. }
  347. }
  348. }
  349. }
  350. }
  351. }
  352. }
  353. </style>