index.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. <template>
  2. <mobile-frame>
  3. <view class="main">
  4. <view class="one">
  5. <image class="image" :src="topUrl" mode=""></image>
  6. </view>
  7. <view class="two">
  8. <view class="pubu">
  9. <view class="list" v-for="(item,index) in list" :key="index" @tap="toBuy(item)">
  10. <view class="list_1">
  11. <image class="image" :src="item.file&&item.file.length>0?item.file[0].url:''" mode=""></image>
  12. </view>
  13. <view class="name">
  14. {{item.name}}
  15. </view>
  16. </view>
  17. </view>
  18. </view>
  19. <view class="is_bottom" v-if="is_bottom">
  20. <text>数据到底了!!</text>
  21. </view>
  22. </view>
  23. </mobile-frame>
  24. </template>
  25. <script>
  26. export default {
  27. data() {
  28. return {
  29. // 系统设置
  30. config: {},
  31. // 路由参数
  32. type: '1',
  33. tags: '',
  34. act_tags: '',
  35. topUrl: '',
  36. // 数据列表
  37. list: [],
  38. is_bottom: true
  39. };
  40. },
  41. onLoad(e) {
  42. const that = this;
  43. if (e && e.tags) {
  44. that.$set(that, `type`, '1')
  45. that.$set(that, `tags`, e.tags || '');
  46. } else {
  47. that.$set(that, `type`, '2')
  48. that.$set(that, `act_tags`, e.act_tags || '');
  49. }
  50. },
  51. onShow: function() {
  52. const that = this;
  53. that.searchConfig();
  54. that.searchOther();
  55. that.search();
  56. },
  57. methods: {
  58. // 查询基本设置
  59. searchConfig() {
  60. const that = this;
  61. uni.getStorage({
  62. key: 'config',
  63. success: function(res) {
  64. if (res.data) that.$set(that, `config`, res.data)
  65. },
  66. fail: function(err) {
  67. console.log(err);
  68. }
  69. })
  70. },
  71. async search() {
  72. const that = this;
  73. let info = {};
  74. if (that.type == '1') info.tags = that.tags;
  75. else if (that.type == '2') info.act_tags = that.act_tags;
  76. let res = await that.$api(`/goods`, 'GET', {
  77. ...info
  78. });
  79. if (res.errcode == '0') {
  80. that.$set(that, `list`, res.data)
  81. }
  82. },
  83. // 查询其他信息
  84. async searchOther() {
  85. const that = this;
  86. let type = that.type;
  87. let act_tags = that.act_tags;
  88. let tags = that.tags;
  89. let topUrl = [];
  90. let res;
  91. if (type == '1') {
  92. res = await that.$api(`/goodsTags`, 'GET', {
  93. code: tags
  94. })
  95. } else if (type == '2') {
  96. res = await that.$api(`/actTags`, 'GET', {
  97. value: act_tags
  98. })
  99. }
  100. if (res.errcode == '0' && res.total > 0) {
  101. let data = res.data[0];
  102. uni.setNavigationBarTitle({
  103. title: data.label
  104. });
  105. if (data.file.length > 0) topUrl = data;
  106. }
  107. if (topUrl.length > 0) {
  108. that.$set(that, `topUrl`, topUrl[0].url)
  109. } else {
  110. that.$set(that, `topUrl`, that.config.config.logo[0].url)
  111. }
  112. },
  113. // 购买
  114. toBuy(e) {
  115. const that = this;
  116. uni.navigateTo({
  117. url: `/pagesHome/order/detail?id=${e._id}`
  118. })
  119. },
  120. }
  121. }
  122. </script>
  123. <style lang="scss">
  124. .main {
  125. display: flex;
  126. flex-direction: column;
  127. width: 100vw;
  128. height: 100vh;
  129. .one {
  130. padding: 2vw;
  131. .image {
  132. width: 100%;
  133. height: 200px;
  134. box-shadow: 0 0 5px #858585;
  135. border-radius: 10px;
  136. }
  137. }
  138. .two {
  139. padding: 0 2vw;
  140. margin: 0 0 2vw 0;
  141. .pubu {
  142. column-count: 2;
  143. column-gap: 3vw;
  144. .list {
  145. margin: 0 0 2vw 0;
  146. -webkit-column-break-inside: avoid;
  147. break-inside: avoid;
  148. box-shadow: 0 0 5px #858585;
  149. padding: 2vw;
  150. border-radius: 5px;
  151. .list_1 {
  152. margin: 0 0 1vw 0;
  153. .image {
  154. width: 100%;
  155. height: 30vh;
  156. border-radius: 10px;
  157. box-shadow: 0 0 5px #f1f1f1;
  158. }
  159. }
  160. .name {
  161. font-size: 16px;
  162. }
  163. }
  164. }
  165. }
  166. }
  167. .is_bottom {
  168. text-align: center;
  169. text {
  170. padding: 2vw 0;
  171. display: inline-block;
  172. }
  173. }
  174. </style>