app-group-goods.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594
  1. <!--拼团-->
  2. <template>
  3. <view class="app-group-goods">
  4. <view class="app-list-mode" v-if="listStyle === -1">
  5. <view class="app-item dir-left-nowrap main-between cross-center" :class="{'app-border': goodsStyle === 2}" v-for="(item, index) in list" :key="index">
  6. <app-jump-button form>
  7. <image class="app-icon" lazy-load="true" v-if="showGoodsTag" :src="goodsTagPicUrl"></image>
  8. <image class="app-image" lazy-load="true" :src="item.cover_pic" :mode="fill === 1 ? 'scaleToFill' : fill === 0 ? 'aspectFit' : ''"></image>
  9. <view class="app-content" :class="{'app-name-padding': !showGoodsName}">
  10. <text class="app-name" v-if="showGoodsName">{{item.name}}</text>
  11. <view class="app-icon-v">
  12. <text class="app-icon-text">{{item.people_num}}人团</text>
  13. </view>
  14. <view class="app-price-button dir-left-nowrap main-between cross-center">
  15. <text class="app-price">¥{{item.pintuan_price}}</text>
  16. <button v-if="showBuyBtn" class="app-button"
  17. :style="{
  18. color: buyBtnStyle === 2 || buyBtnStyle === 4 ? buttonColor : 'white',
  19. borderColor: buttonColor,
  20. backgroundColor: buyBtnStyle === 1 || buyBtnStyle === 3 ? buttonColor : 'white',
  21. }"
  22. :class="{
  23. 'app-filling': buyBtnStyle === 1,
  24. 'app-line': buyBtnStyle === 2,
  25. 'app-fillet-fill': buyBtnStyle === 3,
  26. 'app-rounded-line': buyBtnStyle === 4
  27. }"
  28. >{{buyBtnText}}</button>
  29. </view>
  30. </view>
  31. </app-jump-button>
  32. </view>
  33. </view>
  34. <view class="app-one-per-line" v-if="listStyle === 0">
  35. <view class="app-item dir-top-nowrap"
  36. :class="{'app-border': goodsStyle === 2 || goodsStyle === 4}"
  37. v-for="(item, index) in list"
  38. :key="index"
  39. >
  40. <app-jump-button form arrangement="column">
  41. <image class="app-icon"
  42. lazy-load="true"
  43. v-if="showGoodsTag"
  44. :src="goodsTagPicUrl"
  45. ></image>
  46. <image class="app-image"
  47. :class="{'app-image-square' : goodsCoverProportion === '1-1', 'app-image-rectangle': goodsCoverProportion === '3-2'}"
  48. lazy-load="true"
  49. :src="item.cover_pic"
  50. :mode="fill === 1 ? 'scaleToFill' : fill === 0 ? 'aspectFit' : ''"
  51. ></image>
  52. <text class="app-name"
  53. v-if="showGoodsName"
  54. :class="{'app-text-align': goodsStyle === 3 || goodsStyle === 4 }"
  55. >{{item.name}}</text>
  56. <view class="app-price-button dir-left-nowrap cross-center"
  57. :class="{'main-between': goodsStyle === 1 || goodsStyle === 2, 'main-center': goodsStyle === 3 || goodsStyle === 4, 'app-margin-no-name': !showGoodsName}"
  58. >
  59. <view class="app-group-price">
  60. <text class="app-fight-group">{{item.people_num}}人团</text>
  61. <text class="app-price">¥{{item.pintuan_price}}</text>
  62. </view>
  63. <button class="app-button"
  64. :style="{
  65. color: buyBtnStyle === 2 || buyBtnStyle === 4 ? buttonColor : 'white',
  66. borderColor: buttonColor,
  67. backgroundColor: buyBtnStyle === 1 || buyBtnStyle === 3 ? buttonColor : 'white',
  68. }"
  69. :class="{
  70. 'app-filling': buyBtnStyle === 1,
  71. 'app-line': buyBtnStyle === 2,
  72. 'app-fillet-fill': buyBtnStyle === 3,
  73. 'app-rounded-line': buyBtnStyle === 4
  74. }"
  75. v-if="showBuyBtn && goodsStyle !== 3 && goodsStyle !== 4"
  76. >{{buyBtnText}}</button>
  77. </view>
  78. </app-jump-button>
  79. </view>
  80. </view>
  81. <view class="app-two-per-line dir-left-wrap" v-if="listStyle === 1">
  82. <view v-for="(item, index) in list"
  83. :key="index"
  84. class="app-item dir-top-nowrap"
  85. :class="{'app-border': goodsStyle === 2 || goodsStyle === 4, 'app-item-margin': index%2 === 0}"
  86. >
  87. <app-jump-button form arrangement="column">
  88. <image class="app-icon"
  89. lazy-load="true"
  90. v-if="showGoodsTag"
  91. :src="goodsTagPicUrl"
  92. ></image>
  93. <image class="app-image"
  94. lazy-load="true"
  95. :src="item.cover_pic"
  96. :mode="fill === 1 ? 'scaleToFill' : fill === 0 ? 'aspectFit' : ''"
  97. ></image>
  98. <text class="app-name"
  99. v-if="showGoodsName"
  100. :class="{'app-text-align': goodsStyle === 3 || goodsStyle === 4 }"
  101. >{{item.name}}</text>
  102. <view class="app-group-price-button dir-left-nowrap" :class="{'main-center': goodsStyle === 3 || goodsStyle === 4}">
  103. <view class="app-group-price dir-top-wrap">
  104. <text class="app-fight-group">{{item.people_num}}人团</text>
  105. <text class="app-price">¥{{item.pintuan_price}}</text>
  106. </view>
  107. <button class="app-button"
  108. :style="{
  109. color: buyBtnStyle === 2 || buyBtnStyle === 4 ? buttonColor : 'white',
  110. borderColor: buttonColor,
  111. backgroundColor: buyBtnStyle === 1 || buyBtnStyle === 3 ? buttonColor : 'white',
  112. }"
  113. :class="{
  114. 'app-filling': buyBtnStyle === 1,
  115. 'app-line': buyBtnStyle === 2,
  116. 'app-fillet-fill': buyBtnStyle === 3,
  117. 'app-rounded-line': buyBtnStyle === 4
  118. }"
  119. v-if="showBuyBtn && goodsStyle !== 3 && goodsStyle !== 4">
  120. {{buyBtnText}}
  121. </button>
  122. </view>
  123. </app-jump-button>
  124. </view>
  125. </view>
  126. <app-load-text v-if="!request"></app-load-text>
  127. </view>
  128. </template>
  129. <script>
  130. import appLoadText from '../../basic-component/app-load-text/app-load-text.vue';
  131. import { mapState } from 'vuex';
  132. export default {
  133. name: 'app-group-goods',
  134. components: {
  135. 'app-load-text': appLoadText,
  136. },
  137. computed: {
  138. ...mapState({
  139. height : state=>state.gConfig.systemInfo.windowHeight
  140. })
  141. },
  142. props: {
  143. buttonColor: {
  144. type: String,
  145. default: function() {
  146. return "";
  147. }
  148. },
  149. buyBtnStyle: {
  150. type: Number,
  151. default: function() {
  152. return 3;
  153. }
  154. },
  155. buyBtnText: {
  156. type: String,
  157. default: function() {
  158. return "";
  159. }
  160. },
  161. customizeGoodsTag: {
  162. type: Boolean,
  163. default: function() {
  164. return false;
  165. }
  166. },
  167. fill: {
  168. type: Number,
  169. default: function() {
  170. return 1;
  171. }
  172. },
  173. goodsCoverProportion: {
  174. type: String,
  175. default: function() {
  176. return "";
  177. }
  178. },
  179. goodsStyle: {
  180. type: Number,
  181. default: function() {
  182. return 2;
  183. }
  184. },
  185. goodsTagPicUrl: {
  186. type: String,
  187. default: function() {
  188. return "";
  189. }
  190. },
  191. list: {
  192. type: Array,
  193. default: function() {
  194. return [
  195. ];
  196. }
  197. },
  198. listStyle: {
  199. type: Number,
  200. default: function() {
  201. return 1;
  202. }
  203. },
  204. showBuyBtn: {
  205. type: Boolean,
  206. default: function() {
  207. return true;
  208. }
  209. },
  210. showGoodsName: {
  211. type: Boolean,
  212. default: function() {
  213. return true;
  214. }
  215. },
  216. showGoodsTag: {
  217. type: Boolean,
  218. default: function() {
  219. return true;
  220. }
  221. },
  222. scrollTop: {
  223. type: Number,
  224. default: function() {
  225. return 0;
  226. }
  227. },
  228. value: {
  229. type: Boolean,
  230. default: function() {
  231. return true;
  232. }
  233. }
  234. },
  235. data() {
  236. return {
  237. request: this.value,
  238. }
  239. },
  240. methods: {
  241. autoEnd() {
  242. this.$lazyLoadingData('app-group-goods').then(response => {
  243. if (response[0].height +response[0].top < this.height) {
  244. this.request = false;
  245. this.$emit('input', this.request);
  246. }
  247. });
  248. }
  249. },
  250. watch: {
  251. scrollTop: {
  252. handler: function(n,o) {
  253. if (n > o && this.request) this.autoEnd();
  254. }
  255. }
  256. }
  257. }
  258. </script>
  259. <style scoped lang="scss">
  260. .app-group-goods {
  261. width: #{750rpx};
  262. overflow: hidden;
  263. }
  264. .app-border {
  265. border-color: #e2e2e2 !important;
  266. }
  267. .app-list-mode {
  268. width: #{750rpx};
  269. .app-item {
  270. margin-top: #{15rpx};
  271. width: #{702rpx};
  272. margin-left: #{24rpx};
  273. margin-right: #{24rpx};
  274. height: #{200rpx};
  275. border-bottom-right-radius: #{20rpx};
  276. border-top-right-radius: #{20rpx};
  277. position: relative;
  278. padding-right: #{24rpx};
  279. border: #{1rpx} solid transparent;
  280. .app-icon {
  281. position: absolute;
  282. top: 0;
  283. left: 0;
  284. width: #{65rpx};
  285. height: #{55rpx};
  286. }
  287. .app-image {
  288. width: #{199rpx};
  289. height: #{199rpx};
  290. margin-right: #{33rpx};
  291. }
  292. .app-name-padding {
  293. padding-top: #{81rpx};
  294. }
  295. .app-content {
  296. width: #{446rpx};
  297. height: #{200rpx};
  298. border-bottom-right-radius: #{20rpx};
  299. border-top-right-radius: #{20rpx};
  300. .app-name {
  301. word-break: break-all;
  302. text-overflow: ellipsis;
  303. display: -webkit-box;
  304. -webkit-box-orient: vertical;
  305. -webkit-line-clamp: 2;
  306. overflow: hidden;
  307. font-size: #{28rpx};
  308. color: #353535;
  309. line-height: #{28rpx};
  310. height: #{58rpx};
  311. width: #{702-199-33rpx};
  312. margin-top: #{23rpx};
  313. }
  314. .app-icon-v {
  315. width: #{446rpx};
  316. height: #{35rpx};
  317. line-height: #{35rpx};
  318. margin-top: #{16rpx};
  319. .app-icon-text {
  320. display: inline-block;
  321. padding: 0 #{7rpx};
  322. border: #{1rpx} solid #ff4544;
  323. color: #ff4544;
  324. height: #{30rpx};
  325. line-height: #{30rpx};
  326. font-size: #{20rpx};
  327. border-radius: #{5rpx};
  328. }
  329. }
  330. .app-price-button {
  331. margin-top: #{3rpx};
  332. width: #{446rpx};
  333. height: #{48rpx};
  334. .app-price {
  335. display: inline-block;
  336. height: #{48rpx};
  337. line-height: #{48rpx};
  338. color: #ff4544;
  339. font-size: #{22rpx};
  340. }
  341. .app-button {
  342. display: inline-block;
  343. height: #{48rpx};
  344. line-height: #{48rpx};
  345. padding: 0 #{20rpx};
  346. font-size: #{28rpx};
  347. margin: 0;
  348. border: #{1rpx} solid #ff4544;
  349. }
  350. .app-button:after {
  351. display: none;
  352. }
  353. .app-filling {
  354. background-color: #ff4544;
  355. color: white;
  356. }
  357. .app-line {
  358. background-color: white;
  359. color: #ff4544;
  360. }
  361. .app-fillet-fill {
  362. background-color: #ff4544;
  363. color: white;
  364. border-radius: #{20rpx};
  365. }
  366. .app-rounded-line {
  367. background-color: white;
  368. color: #ff4544;
  369. border-radius: #{20rpx};
  370. }
  371. }
  372. }
  373. }
  374. }
  375. .app-one-per-line {
  376. width: #{750rpx};
  377. padding: #{2rpx} #{24rpx};
  378. .app-item {
  379. width: #{702rpx};
  380. position: relative;
  381. border: #{1rpx} solid transparent;
  382. margin-top: #{24rpx};
  383. border-bottom-right-radius: #{10rpx};
  384. border-bottom-left-radius: #{10rpx};
  385. overflow: hidden;
  386. .app-icon {
  387. position: absolute;
  388. top: 0;
  389. left: 0;
  390. width: #{65rpx};
  391. height: #{55rpx};
  392. }
  393. .app-image {
  394. width: #{702rpx};
  395. }
  396. .app-image-square {
  397. height: #{702rpx};
  398. }
  399. .app-image-rectangle {
  400. height: #{280.8rpx};
  401. }
  402. .app-name {
  403. word-break: break-all;
  404. text-overflow: ellipsis;
  405. display: -webkit-box;
  406. -webkit-box-orient: vertical;
  407. -webkit-line-clamp: 1;
  408. overflow: hidden;
  409. width: #{702rpx};
  410. padding: 0 #{24rpx};
  411. margin-top: #{28rpx};
  412. font-size: #{26rpx};
  413. color: #353535;
  414. }
  415. .app-text-align {
  416. text-align: center;
  417. }
  418. .app-price-button {
  419. width: #{702rpx};
  420. padding: 0 #{24rpx};
  421. height: #{48rpx};
  422. margin-top: #{36rpx};
  423. margin-bottom: #{24rpx};
  424. .app-group-price {
  425. .app-fight-group {
  426. height: #{30rpx};
  427. border: #{1rpx} solid #ff4544;
  428. font-size: #{20rpx};
  429. line-height: #{30rpx};
  430. padding: 0 #{14rpx};
  431. color: #ff4544;
  432. margin-right: #{12rpx};
  433. }
  434. .app-price {
  435. font-size: #{22rpx};
  436. color: #ff4544;
  437. }
  438. }
  439. .app-margin-no-name {
  440. margin-top: #{92rpx};
  441. }
  442. .app-button {
  443. height: #{48rpx};
  444. padding: 0 #{20rpx};
  445. font-size: #{26rpx};
  446. line-height: #{48rpx};
  447. margin: 0;
  448. border-radius: 0;
  449. border: #{1rpx} solid #ff4544;
  450. }
  451. .app-button:after {
  452. display: none;
  453. }
  454. .app-filling {
  455. background-color: #ff4544;
  456. color: white;
  457. }
  458. .app-line {
  459. background-color: white;
  460. color: #ff4544;
  461. }
  462. .app-fillet-fill {
  463. background-color: #ff4544;
  464. color: white;
  465. border-radius: #{20rpx};
  466. }
  467. .app-rounded-line {
  468. background-color: white;
  469. color: #ff4544;
  470. border-radius: #{20rpx};
  471. }
  472. }
  473. }
  474. }
  475. .app-two-per-line {
  476. width: #{750rpx};
  477. padding: #{2rpx} #{24rpx};
  478. .app-item {
  479. width: #{346rpx};
  480. height: #{534rpx};
  481. border-bottom-left-radius: #{10rpx};
  482. border-bottom-right-radius: #{10rpx};
  483. border: #{1rpx} solid transparent;
  484. overflow: hidden;
  485. position: relative;
  486. margin-top: #{24rpx};
  487. margin-bottom: #{24rpx};
  488. padding-bottom: #{24rpx};
  489. .app-icon {
  490. position: absolute;
  491. top: 0;
  492. left: 0;
  493. width: #{65rpx};
  494. height: #{55rpx};
  495. }
  496. .app-image {
  497. width: #{346rpx};
  498. height: #{346rpx};
  499. }
  500. .app-name {
  501. word-break: break-all;
  502. text-overflow: ellipsis;
  503. display: -webkit-box;
  504. -webkit-box-orient: vertical;
  505. -webkit-line-clamp: 2;
  506. overflow: hidden;
  507. margin-top: #{24rpx};
  508. padding: 0 #{24rpx};
  509. font-size: #{25rpx};
  510. width: #{346rpx};
  511. height: #{49rpx};
  512. line-height: #{25rpx};
  513. color: #353535;
  514. }
  515. .app-text-align {
  516. text-align: center;
  517. }
  518. .app-group-price-button {
  519. width: #{346rpx};
  520. padding: 0 #{24rpx};
  521. height: #{36+48rpx};
  522. position: relative;
  523. .app-group-price {
  524. height: #{36+48rpx};
  525. .app-fight-group {
  526. display: inline-block;
  527. height: #{30rpx};
  528. border-radius: #{10rpx};
  529. border: #{1rpx} solid #ff4544;
  530. font-size: #{20rpx};
  531. line-height: #{30rpx};
  532. text-align: center;
  533. padding: 0 #{13rpx};
  534. color: #ff4544;
  535. margin-top: #{16rpx};
  536. }
  537. .app-price {
  538. font-size: #{20rpx};
  539. color: #ff4544;
  540. /* #ifndef MP-BAIDU || MP-WEIXIN */
  541. margin-top: #{13rpx};
  542. /* #endif */
  543. /* #ifdef MP-BAIDU */
  544. margin-top: #{10rpx};
  545. /* #endif */
  546. /* #ifdef MP-WEIXIN */
  547. margin-top: #{11rpx};
  548. /* #endif */
  549. }
  550. }
  551. .app-button {
  552. display: inline-block;
  553. margin: #{36rpx} 0 0 0;
  554. padding: 0 #{10rpx};
  555. min-width: #{120rpx};
  556. height: #{48rpx};
  557. font-size: #{26rpx};
  558. line-height: #{48rpx};
  559. border-radius: 0;
  560. border: #{1rpx} solid #ff4544;
  561. position: absolute;
  562. right: #{24rpx};
  563. }
  564. .app-button:after {
  565. display: none;
  566. }
  567. .app-filling {
  568. background-color: #ff4544;
  569. color: white;
  570. }
  571. .app-line {
  572. background-color: white;
  573. color: #ff4544;
  574. }
  575. .app-fillet-fill {
  576. background-color: #ff4544;
  577. color: white;
  578. border-radius: #{20rpx};
  579. }
  580. .app-rounded-line {
  581. background-color: white;
  582. color: #ff4544;
  583. border-radius: #{20rpx};
  584. }
  585. }
  586. }
  587. .app-item-margin {
  588. margin-right: #{10rpx};
  589. }
  590. }
  591. </style>