activity.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. <template>
  2. <view class="content">
  3. <view class="Box">
  4. <view class="productBox" v-for="(item,index) in productList" :key="index"
  5. @click="goodsDateils(item.shopId,item.productId,item.skuId)">
  6. <view class="proImg">
  7. <image :src="item.image" mode=""></image>
  8. </view>
  9. <view class="rightBox">
  10. <view class="proTitle">
  11. {{item.productName}}
  12. </view>
  13. <view class="price">
  14. <text class="fs36 font-color-red">
  15. ¥{{item.price}}
  16. </text>
  17. <text class="mar-left-10 fs26">
  18. {{item.users}}人付款
  19. </text>
  20. </view>
  21. <view class="flex-sp-between flex-display mar-top-20" @click.stop="goStore(item.shopId)">
  22. <view>
  23. {{item.shopName}}
  24. </view>
  25. <view>
  26. <image class="rightIcon" src="../static/images/arrowRight.png" mode="aspectFill"></image>
  27. </view>
  28. </view>
  29. </view>
  30. </view>
  31. </view>
  32. </view>
  33. </template>
  34. <script>
  35. const NET = require('@/utils/request')
  36. const API = require('@/config/api')
  37. export default {
  38. data() {
  39. return {
  40. list: [],
  41. pageSize: 1,
  42. productList:[]
  43. }
  44. },
  45. onPullDownRefresh() { //上拉触底函数
  46. this.pageSize = this.pageSize + 1
  47. this.GetremenList()
  48. },
  49. onLoad() {
  50. this.GetremenList()
  51. },
  52. methods: {
  53. // 获取列表数据
  54. GetremenList() {
  55. let timestamp = new Date().getTime()
  56. NET.request(API.GetremenList, {
  57. page: this.pageSize,
  58. pageSize: 5,
  59. timestamp: timestamp
  60. }, 'get').then(res => {
  61. uni.stopPullDownRefresh();
  62. console.log(res)
  63. if (res.code == 200) {
  64. this.productList = res.data.list
  65. } else {
  66. uni.showToast({
  67. title: res.message,
  68. icon: 'none'
  69. })
  70. }
  71. })
  72. },
  73. // 跳转店铺
  74. goStore(shopId) {
  75. uni.navigateTo({
  76. url: './store/index?storeId=' + shopId
  77. })
  78. },
  79. //商品详情
  80. goodsDateils(shopId, productId, skuId) {
  81. console.log(111)
  82. uni.navigateTo({
  83. url: './goodsModule/goodsDetails?shopId=' + shopId + '&productId=' + productId + '&skuId=' +
  84. skuId
  85. })
  86. }
  87. }
  88. }
  89. </script>
  90. <style lang="scss" scoped>
  91. page {
  92. background-color: #FBE7E0;
  93. }
  94. .content {
  95. .Box {
  96. padding: 30upx;
  97. .productBox {
  98. background-color: #FFFFFF;
  99. height: 280upx;
  100. margin-bottom: 20upx;
  101. border-radius: 20upx;
  102. padding: 20upx;
  103. display: flex;
  104. justify-content: space-between;
  105. .proImg {
  106. width: 240upx;
  107. height: 240upx;
  108. image {
  109. width: 100%;
  110. height: 100%;
  111. border-radius: 20upx;
  112. }
  113. }
  114. .rightBox {
  115. width: 60%;
  116. .proTitle {
  117. overflow: hidden;
  118. text-overflow: ellipsis;
  119. display: -webkit-box;
  120. -webkit-box-orient: vertical;
  121. -webkit-line-clamp: 2;
  122. }
  123. .biao {
  124. margin-top: 20upx;
  125. text {
  126. margin-right: 10upx;
  127. border-radius: 5upx;
  128. color: #C5AA7B;
  129. padding: 5upx 10upx 5upx;
  130. background-color: #FBE7E0;
  131. }
  132. }
  133. .price {
  134. margin-top: 55upx;
  135. }
  136. .rightIcon {
  137. width: 24upx;
  138. height: 24upx;
  139. }
  140. }
  141. }
  142. }
  143. }
  144. </style>