index.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252
  1. <template>
  2. <mobile-frame>
  3. <view class="main">
  4. <view class="one">
  5. <scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage" @scroll="toScroll">
  6. <view class="list-scroll-view">
  7. <view class="one_1">
  8. <image class="image" :src="topUrl" mode="aspectFit"></image>
  9. </view>
  10. <view class="one_2">
  11. <view class="list" v-for="(item,index) in list" :key="index" @tap="toBuy(item)">
  12. <view class="list_1">
  13. <image class="image" :src="item.file&&item.file.length>0?item.file[0].url:''"
  14. mode=""></image>
  15. </view>
  16. <view class="name textOver">
  17. {{item.name}}
  18. </view>
  19. </view>
  20. </view>
  21. <view class="is_bottom" v-if="is_bottom">
  22. <text>{{config.bottom_title}}</text>
  23. </view>
  24. </view>
  25. </scroll-view>
  26. </view>
  27. </view>
  28. </mobile-frame>
  29. </template>
  30. <script>
  31. export default {
  32. data() {
  33. return {
  34. // 系统设置
  35. config: {},
  36. // 路由参数
  37. type: '1',
  38. tags: '',
  39. act_tags: '',
  40. topUrl: '',
  41. list: [],
  42. total: 0,
  43. page: 0,
  44. skip: 0,
  45. limit: 10,
  46. // 数据是否触底
  47. is_bottom: false,
  48. scrollTop: 0,
  49. };
  50. },
  51. onLoad(e) {
  52. const that = this;
  53. if (e && e.tags) {
  54. that.$set(that, `type`, '1')
  55. that.$set(that, `tags`, e.tags || '');
  56. } else if (e && e.act_tags) {
  57. that.$set(that, `type`, '2')
  58. that.$set(that, `act_tags`, e.act_tags || '');
  59. }
  60. that.searchConfig();
  61. that.searchOther();
  62. that.search();
  63. },
  64. onPullDownRefresh: async function() {
  65. const that = this;
  66. that.clearPage()
  67. await that.search();
  68. uni.stopPullDownRefresh();
  69. },
  70. methods: {
  71. // 查询基本设置
  72. searchConfig() {
  73. const that = this;
  74. uni.getStorage({
  75. key: 'config',
  76. success: function(res) {
  77. if (res.data) that.$set(that, `config`, res.data)
  78. }
  79. })
  80. },
  81. async search() {
  82. const that = this;
  83. let info = {
  84. skip: that.skip,
  85. limit: that.limit
  86. };
  87. if (that.type == '1') info.tags = that.tags;
  88. else if (that.type == '2') info.act_tags = that.act_tags;
  89. let res = await that.$api(`/goods`, 'GET', {
  90. ...info,
  91. status: '1'
  92. });
  93. if (res.errcode == '0') {
  94. let list = [...that.list, ...res.data];
  95. that.$set(that, `list`, list)
  96. that.$set(that, `total`, res.total)
  97. }
  98. },
  99. toPage() {
  100. const that = this;
  101. let list = that.list;
  102. let limit = that.limit;
  103. if (that.total > list.length) {
  104. uni.showLoading({
  105. title: '加载中',
  106. mask: true
  107. })
  108. let page = that.page + 1;
  109. that.$set(that, `page`, page)
  110. let skip = page * limit;
  111. that.$set(that, `skip`, skip)
  112. that.search();
  113. uni.hideLoading();
  114. } else that.$set(that, `is_bottom`, true)
  115. },
  116. toScroll(e) {
  117. const that = this;
  118. let up = that.scrollTop;
  119. that.$set(that, `scrollTop`, e.detail.scrollTop);
  120. let num = Math.sign(up - e.detail.scrollTop);
  121. if (num == 1) that.$set(that, `is_bottom`, false);
  122. },
  123. // 查询其他信息
  124. async searchOther() {
  125. const that = this;
  126. let type = that.type;
  127. let act_tags = that.act_tags;
  128. let tags = that.tags;
  129. let topUrl = [];
  130. let res;
  131. if (type == '1') {
  132. res = await that.$api(`/goodsTags/getData`, 'GET', {
  133. code: tags
  134. })
  135. } else if (type == '2') {
  136. res = await that.$api(`/actTags/getData`, 'GET', {
  137. value: act_tags
  138. })
  139. }
  140. if (res.errcode == '0') {
  141. let data = res.data;
  142. uni.setNavigationBarTitle({
  143. title: data.label
  144. });
  145. if (that.type == '1' && data.tags_file.length > 0) topUrl = data.tags_file
  146. else if (that.type == '2' && data.file.length > 0) topUrl = data.file
  147. }
  148. if (topUrl.length > 0) {
  149. that.$set(that, `topUrl`, topUrl[0].url)
  150. } else {
  151. that.$set(that, `topUrl`, that.config.config.logo[0].url)
  152. }
  153. },
  154. // 购买
  155. toBuy(e) {
  156. const that = this;
  157. uni.navigateTo({
  158. url: `/pagesHome/order/detail?id=${e._id}`
  159. })
  160. },
  161. // 清空列表
  162. clearPage() {
  163. const that = this;
  164. that.$set(that, `list`, [])
  165. that.$set(that, `skip`, 0)
  166. that.$set(that, `limit`, 6)
  167. that.$set(that, `page`, 0)
  168. }
  169. },
  170. }
  171. </script>
  172. <style lang="scss">
  173. .main {
  174. display: flex;
  175. flex-direction: column;
  176. width: 100vw;
  177. height: 100vh;
  178. .one {
  179. .one_1 {
  180. padding: 2vw;
  181. background-color: #ffffff;
  182. .image {
  183. width: 100%;
  184. height: 200px;
  185. box-shadow: 0 0 5px #f1f1f1;
  186. border-radius: 10px;
  187. }
  188. }
  189. .one_2 {
  190. display: flex;
  191. justify-content: space-between;
  192. flex-wrap: wrap;
  193. padding: 0 2vw;
  194. .list {
  195. width: 43vw;
  196. margin: 0 0 2vw 0;
  197. box-shadow: 0 0 5px #f1f1f1;
  198. padding: 2vw;
  199. border-radius: 5px;
  200. .list_1 {
  201. margin: 0 0 1vw 0;
  202. .image {
  203. width: 100%;
  204. height: 30vh;
  205. border-radius: 10px;
  206. box-shadow: 0 0 5px #f1f1f1;
  207. }
  208. }
  209. .name {
  210. font-size: 16px;
  211. }
  212. }
  213. }
  214. }
  215. }
  216. .scroll-view {
  217. position: absolute;
  218. top: 0;
  219. left: 0;
  220. right: 0;
  221. bottom: 0;
  222. .list-scroll-view {
  223. display: flex;
  224. flex-direction: column;
  225. }
  226. }
  227. .is_bottom {
  228. text-align: center;
  229. text {
  230. padding: 2vw 0;
  231. display: inline-block;
  232. color: #858585;
  233. font-size: 14px;
  234. }
  235. }
  236. </style>